前端--两个table表的对比及不同单元格内容样式按要求设定

主要是领导这边有要求做个table的对比，另外表格中内容不同的单元格要设定一定的样式，比如说背景置为红色之类的，所以参考网上的一些方案，写了个还算是通用的方法，大家如果有需要可以copy过去，改一改直接用就好了：

//用来对比两个表格单元格的内容，不同的地方附加样式（样式以后可以改成传递方式）
function casTableContent(currTable, temptable, differentStyle) {
    var differentCount = 0;
    var currTableElement = document.getElementById(currTable);
    var temptableElement = document.getElementById(temptable);
    var currTableRows = currTableElement.rows.length;
    var currTableCells = currTableElement.rows[0].cells.length;
    var temptableRows = temptableElement.rows.length;
    //行数相同，则对比每个单元格数据，不同的数据则体现样式
    if (temptableRows === currTableRows) {
        for (var i = 1; i < currTableRows; i++) {
            for (var p = 0; p < currTableCells; p++) {
                var currInnerText = currTableElement.rows[i].cells[p].innerText;
                var tempInnerText = temptableElement.rows[i].cells[p].innerText;
                if (currInnerText !== tempInnerText) {
                    temptableElement.rows[i].cells[p].style = differentStyle;
                    differentCount++;
                }
            }
        }
    } else {
        //行数不同，则从上往下把未实际落实的（计算规划出来的）行数据置为黄色
        for (var i = 1; i < (currTableRows > temptableRows ? temptableRows : currTableRows); i++) {
            for (var p = 0; p < currTableCells; p++) {
                var currInnerText = currTableElement.rows[i].cells[p].innerText;
                var tempInnerText = temptableElement.rows[i].cells[p].innerText;
                if (currInnerText !== tempInnerText) {
                    temptableElement.rows[i].cells[p].style = differentStyle;
                    differentCount++;
                }
            }
        }
        if(temptableRows > currTableRows){
            for (var i = currTableRows; i < temptableRows; i++) {
                for (var p = 0; p < currTableCells; p++) {
                    temptableElement.rows[i].cells[p].style = differentStyle;
                    differentCount++;
                }
            }
        }
    }
    return differentCount;
}

这里做个说明，参数主要是三个，一：当前表格，二：即将作为展示的表格（需要跟当前表格对比，不容的地方加样式），三：代表要在每个单元格上加的样式

这里面判断了，如果两个表格行相同，那就比较每个单元格，如果行不同，要分情况：

要展现的tempTable行数比当前在展示中的少，说明，新查出来的table是有删减的，所以只需要比较tempTable那个行数的所有行就行，不同的都加样式

如果展现的tempTable行数比当前在展示中的多，说明，有新增加的行，那么比原来多的行肯定是要都加样式的，相当于新的坐标，而之前的那些currTable行数，对应的行需要对比一下，看看不同的地方，是要加样式的

 

这个可能跟你们的需求不一定一致，可以根据自己的做修改，列数不同的都可以简单改造下。

 

 

 

 

 

 

 

 

 

 

-----------------------------------------------------2020年7月24日版本--------------------------------------------------

//用来对比两个表格单元格的内容，不同的地方附加样式（样式以后可以改成传递方式）
function casTableContent(currData, nextData, differentStyle, ignoreStyleColNum) {
    var differentCount = 0;
    var currTableRows = currData.length;
    var temptableRows = nextData.length;
    if (temptableRows === currTableRows) {
        //行数一致
        differentCount = sameRows(currData, nextData, ignoreStyleColNum, differentStyle);
    } else if(temptableRows < currTableRows){
        //减行数
        differentCount = decreaseRows(currData, nextData, ignoreStyleColNum, differentStyle);
    }else {
        //加行数
        differentCount = increaseRows(currData, nextData, ignoreStyleColNum, differentStyle);
    }
    return differentCount;
}

function newTDWithIdAndStyle(text, tdId, differentStyle) {
    return "<td nowrap='nowrap' id="+ tdId +" style=" + differentStyle + ">" + text + "</td>";
}

function sameRows(currData, nextData, ignoreStyleColNum, differentStyle) {
    var differentCount = 0;
    for (var i = 0; i < (currData.length > nextData.length ? nextData.length : currData.length); i++) {
        for (var p = 0; p < nextData[0].length; p++) {
            if (currData[i][p] === nextData[i][p]) continue;
            var changeFlag = false;
            var tdId = 'td－' + i + '-' + p;
            for (var q = 0; q < ignoreStyleColNum.length; q++) {
                if (p === ignoreStyleColNum[q]) {
                    //无样式只替换数据
                    $('#' + tdId).html(nextData[i][p]);
                    changeFlag = true;
                    break;
                }
            }
            if (!changeFlag) {
                //替换样式以及数据
                $('#' + tdId).html(nextData[i][p]);
                $('#' + tdId).attr('style', differentStyle);
                differentCount++;
            }
        }
    }
    return differentCount;
}

function decreaseRows(currData, nextData, ignoreStyleColNum, differentStyle) {
    var differentCount = sameRows(currData, nextData, ignoreStyleColNum, differentStyle);
    for (var i = nextData.length; i < currData.length; i++) {
        var trId = 'tr－' + i;
        $('#' + trId).remove();
        differentCount++;
    }
    return differentCount;
}

function increaseRows(currData, nextData, ignoreStyleColNum, differentStyle) {
    var differentCount = sameRows(currData, nextData, ignoreStyleColNum, differentStyle);
    for (var i = currData.length; i < nextData.length; i++) {
        var trId = 'tr－' + i;
        var text = "";
        text += "<tr class=\"a2\" id=" + trId + ">";
        for (var p = 0; p < nextData[0].length; p++) {
            var tdId = 'td－' + i + '-' + p;
            text += newTDWithIdAndStyle(nextData[i][p], tdId, "");
            differentCount++;
        }
        text += "</tr>";
        $('#planData').find("tbody").append(text);
    }
    return differentCount;
}