Question

如果值小于0，我想更改所有第4个单元格（我给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为null。比我尝试过的只是改变背景颜色。

$('#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() {
  // ...

更改所有td颜色

1 个答案: