表格花式处理集锦一

1、在表格中实现鼠标滑过的行变色，点击的行变色。

function change_colour_row() {
        var tab = document.getElementById("tracking_table"),
                rows = tab.getElementsByTagName("tr");
        var  x;
        for (var i = 0; i < rows.length; i++) {
            //鼠标移入行内高亮
            rows[i].onmouseover = function () {
                if (this.style.backgroundColor == '') {
                    this.style.backgroundColor = "#FAFAD2";
                    x = 1;
                } else {
                    this.style.backgroundColor = "#E6E6FA";
                    x = 2;
                }
            }
            //鼠标移出行外不亮
            rows[i].onmouseout = function () {
                if (x == 0 || x == 2) {
                    this.style.backgroundColor = "#E6E6FA";
                }
                if (x == 3 || x == 1) {
                    this.style.backgroundColor = '';
                }
            }
            //鼠标点击变色
            rows[i].onclick = function () {
                if (x == 0 || x == 2) {
                    this.style.backgroundColor = '';
                    x = 3;
                } else {
                    this.style.backgroundColor = "#E6E6FA";
                    x = 0;
                }
            }
        }
    }

 

2、查询表格中列名对应的列号

function cx_col_num(col_name) {
        var tab = document.getElementById("tracking_table"),
                rows = tab.getElementsByTagName("tr"),
                cells = tab.rows[0].cells;
        for (var i = 0; i < cells.length; i++) {
            var cont_row_0 = '';
            cont_row_0 = rows[0].cells[i].textContent;
            if (cont_row_0 === col_name) {
                return i;
            }
        }
    }

 

3、根据行号和列名查询对应单元格的值。

function cell_text (i,col_name){
    var table = $('#tracking_table').DataTable();
    var page_len=0;
    page_len=table.page.len();
    i=i%page_len;
    var tab = document.getElementById("tracking_table"),
            rows = tab.getElementsByTagName("tr");
    var j=cx_col_num(col_name);             //根据列名查找列号
    var cont_cell=tab.rows[i].cells[j].textContent;
    return cont_cell;
}

 

注意：此方法仅仅适用于本人的项目，读者若使用，还需要一定的修改。