javascript - jquery 按内容更改动态创建的表的颜色

Question

我有一个 div 用于加载动态生成的表格。

到目前为止，我可以生成表格并使用 on("click"or "mouseover", function) 实现结果，但我需要在加载表格时更改表格。

起初我使用的是 each()，但它不适用于动态内容，所以在阅读更多内容后，我将其更改为 on()。

我不想点击每个单元格来进行更改。

代码:查询

    $(function () {
    $("#outputDiv2").on('click', "td", function () {
        if ($(this).text() == 'notconnect') {
        $(this).css('background-color', '#d5d5c3');
        } else if ($(this).text() == 'connected') {
        $(this).css('background-color', '#00e600');
        } else if ($(this).text() == 'disabled') {
            $(this).css('background-color', '#cc0000');
        } else if ($(this).text() == 'err-disable') {
           $(this).css('background-color', '#ff9900');
      }
  });
});

jsfiddle 上的示例 html 表和脚本

https://jsfiddle.net/frams/daknayhn/3/

Answer 1

您可以为每种类型使用 css 类，当您动态创建表格行时，您可以为每一行分配相应的类

.connected
{
  background-color: #00e600
  
}

.err-disable
{
  background-color: #ff9900
  
}

.disabled
{
  background-color: #cc0000
  
}

.notconnect
{
  background-color: #d5d5c3
  
}

<div id="outputDiv2">
  <table border="1">
    <tbody id="tableD">
      <tr>
        <td nowrap=""><a href="#'">Port</a></td>
        <td nowrap="">Name</td>
        <td nowrap="">Status</td>
        <td nowrap="">Vlan</td>
        <td nowrap="">Duplex</td>
        <td nowrap="">Speed </td>
        <td nowrap="">Type
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/1</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="connected" >connected</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap="">10 </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/2</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="connected">connected</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap="">10 </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/3</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="notconnect">notconnect</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap=""> auto </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/4</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="notconnect">notconnect</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap=""> auto </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/4</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="notconnect">notconnect</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap=""> auto </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/4</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="err-disable">err-disable</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap=""> auto </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
      <tr>
        <td nowrap=""><a href="#'">Fa0/4</a></td>
        <td nowrap=""></td>
        <td nowrap="" class="disabled">disabled</td>
        <td nowrap="">1</td>
        <td nowrap="">auto</td>
        <td nowrap=""> auto </td>
        <td nowrap="">10/100BaseTX
        </td>
      </tr>
    </tbody>
  </table>
</div>