Question

我有一个包含客户端的数据库，每个客户端都有自己的颜色分配。我正在尝试在表中收取客户及其颜色。我正在使用jQuery。问题是，当我向表中的数据收费时，它只为所有它们的最后一个客户收费（除了属于该颜色的客户）。这是我的代码：

HTML：

<table id="tablaClientes" class="tablaClientes">
        <thead>
          <tr>
            <th hidden>ID</th>
            <th>Nombre del Cliente</th>
            <th>Color</th>
            <th>Editar Cliente</th>
          </tr>
        </thead>
        <tbody>
        </tbody>
        </table><br/><br/>

JS：

$(function getClientes(){
    $.getJSON(URL)
    .done(function(data) {
        console.log(TAG + "AJAX GET CLIENTE")
        console.log(TAG + "typeof data: " + typeof data + " data: " + data);
        for(let cli of data){
                let id = cli.id_cliente;
                let nombre = cli.nombre_cliente;
                let color = cli.color_cliente;
                console.log(TAG + "id cliente: " + id);
                console.log(TAG + "nombre cliente: " + nombre);
                console.log(TAG + "color cliente: " + color);
                let tr = $('<tr id="filaCliente"> <td hidden id="idCliente">' + id + '</td> <td>' + nombre
                + '</td>' + '<td><div class="color"></div></td> <td><button id="btnEditar">Editar</button></td> </tr>');
                $('.color').css({"background":color});
                $("#tablaClientes tbody").append(tr);
        }
    });
});

CSS：

.color {
    width: 25px;
    height: 25px;
    border: 1px;
    }

这就是我得到的： the table with clients and colors

您可以在图像中看到的所有颜色都相同，只是最后一个'UPV'是该颜色所属的颜色。我知道这是因为它用AJAX调用中最后一个客户端的颜色更改了类“ .color”的所有td。但是我不知道该如何解决。而且我不明白为什么它会填满除最后一个客户以外的所有td。

也尝试了$('.color', this).css({"background":color});，但是它不起作用。而且，如果我通过ID更改CLASS属性，它只会用最后一个的颜色填充第一个客户端的颜色。

Answer 1

这里的快速解决方法是：您可以插入内联样式，而不是使用类。

更改：

m = np.nanmin(df.replace(0, np.nan).values)

至：

<td><div class="color"></div></td>

Answer 2

您可以为“ td”提供特定的类。

否则，您可以使用CSS选择器设置“ td”的样式。

例如：

tr td:nth-child(1){color:red;}
tr td:nth-child(2){color:blue;}
tr td:nth-child(3){color:green;}

或者您可以使用添加甚至

tr td:nth-child(odd){color:red;}
tr td:nth-child(even){color:blue;}

您也可以使用此

tr td:nth-child(4n+1){color:green}

Answer 3

在这一行：

 $('.color').css({"background":color});

您更改了所有.color格。您需要这个：

 tr.find('.color').css({"background":color});

如何使用jQuery和CSS更改表格中的特定td样式

3 个答案: