javascript - 更改所有td颜色

Question

如果值小于 0，我想更改所有第四个单元格(我给 id 'zal')背景。我尝试更改每个单元格，但只更改第一行。我尝试了 javascript 和 jquery。它并没有以某种方式改变。感谢您的帮助。

<table id="ex-table" class="table">
  <tr id="tr" class="mini">

 </table> 

CSS:

.table {
  width: 100%;
  border-spacing:0;

}

th{ 
padding: 10px;
}

td {
    padding: 15px;

}

.mini{
color: black;
font-family: 'Open Sans', sans-serif;
background: #fff;
text-align: center;

}

.redback {
    background: #FF0000;
}

Javascript:

  var database = firebase.database();
    database.ref("orders").once('value', function(snapshot){
        if(snapshot.exists()){
            var content = '';
            snapshot.forEach(function(data){
                var val = data.val();
                var degis = val[5].replace("pips", "     ");
                var tss = degis.substring(0,7);

                content +='<tr class="mini">';
                content += '<td>' + val[0] + '</td>';
                content += '<td>' + val[1] + '</td>';
                content += '<td>' + val[4] + '</td>';
                content += '<td id="zal">' + tss + '</td>';
                content += '</tr>';

                /*var x = document.getElementById("zal");

                if(tss<0){
                x.style.backgroundColor = "yellow";
                }*/



            });

            $('#ex-table').append(content);

        }

        $('#zal').each(function() {

             $(this).addClass('redback');

        });

    });

当我尝试如下时，它还说 tss 为空。我尝试只更改背景颜色。

$('#zal').each(function() {
        if(tss<0){      
                 $(this).addClass('redback');
                }
            });

Answer 1

您不能使用id就好像它是 class .

安id根据定义，在整个页面中必须是唯一的。如果同一页面上有多个浏览器，则可以随意公开未定义的行为，例如:

• 没有节点具有该 ID；
• 第一个节点具有该 ID；
• 许多节点都有该 ID。

但一般来说，您会破坏页面，如果它是 HTML5，您可能会陷入兼容模式。

一个class另一方面，如数学中所定义的，是项目的“类”。它可能包含 0、1 或多个项目。所以如果你想打很多<td>节点，您必须使用 class而不是id :

content += '<td class="zal">' + tss + '</td>';

和:

$('.zal').each(function() {
  // ...