javascript - 覆盖特定列单元格上的 css

Question

这是我创建表的代码，我有 3 个数组 array1 、 array2 和结果。我正在用它们创建不同的列。在第三列中，我设置了一个条件来根据数字是否为负/正/中性来更改文本的颜色。在中性和非数字条件下，我将其保持为黑色。

由于这种情况，css 也被应用于标题，即结果 [0]。如何避免将中性类应用于结果列的第一个单元格。有什么方法可以在结果列的第一个单元格上指定 css，以便它优先于应用的其他 css

   array1 = ["Array1", "$161.90", "$53.30", "$186.20", "Match up to $350 ", "Match to $700 ", "$3,000.00", "$6,000.00", "$6,650.00", "$13,300.00", "None"]
array2 = ["Array2", "$11.30", "$53.80", "$18.00", "$350 ", "Match to $700 ", "$3,000.00", "$7,000.00", "$6,950.00", "Match up to $350 ", "Not available"]
result = ["Result Column", "-$1.30", "-$53.80", "$1.00", "$50 ", "Match to $700 ", "$3,000.00", "$7,000.00", "$6,950.00", "$350 ", "Not available"]
  
  var table
  var modalBody = $('<div id="modalContent"></div>');
  buildTable();
                //builds table from 2 column arrays and result array
                function buildTable() {
                    var modalTable = document.createElement("TABLE");
                    modalTable.setAttribute("id", "myTable");
                    modalBody.html(modalTable);
                    for (let i = 0; i < array1.length; i++) {
                        var row = document.createElement("TR");
                        row.setAttribute("id", "myTr" + i);
                        modalTable.appendChild(row);
                        var col1 = document.createElement("TD");
                        var col1_text = document.createTextNode(array1[i]);
                        var col2 = document.createElement("TD");
                        var col2_text = document.createTextNode(array2[i]);
                        var col3 = document.createElement("TD");
                        var col3_text = document.createTextNode(result[i]);
                        col1.appendChild(col1_text);
                        col2.appendChild(col2_text);
                        col3.appendChild(col3_text);
                        resultcomp = result[i].replace(/\$/g, '');
                       
                        if(resultcomp < 0 && !isNaN(resultcomp)){
                          
                            col3.setAttribute("class", "negative");
                        }
                        else if(resultcomp > 0 && !isNaN(resultcomp)){
                           
                            col3.setAttribute("class", "positive");
                        }
                        else {
                            col3.setAttribute("class", "neutral");
                        }
                        
                        row.appendChild(col1);
                        row.appendChild(col2)
                        row.appendChild(col3)

                    }
                    return table;
                }
                $(".modal-body").html(modalBody);

.negative{
    color: red;
    font-weight: 500;
}
.positive{
    color:green;
    font-weight: 500;
}
.neutral{
    color: black;
    font-weight: 500
}
#myTable > #myTr0{
    color: white !important;
    font-weight: 500;
}
td:first-of-type{
    color:white !important;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle"
            aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" onclick="hidemodal()" data-dismiss="modal">&times;</button>
                    </div>
                    <div class="modal-body"></div>
                    <div class="modal-footer"></div>
                </div>
            </div>
        </div>

标签： javascripthtmlcssif-statement

Answer 1

只需添加一个条件来检查i设置类的代码部分的值。

if (i > 0) {
    if(resultcomp < 0 && !isNaN(resultcomp)){
        col3.setAttribute("class", "negative");
    }
    else if(resultcomp > 0 && !isNaN(resultcomp)){
        col3.setAttribute("class", "positive");
    }
    else {
        col3.setAttribute("class", "neutral");
    }
}