Question

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

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

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

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

代码： Jquery的

    $(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表和脚本

http://certs.godaddy.com/repository//CN=Go

Answer 1

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

＆＃13;

.connected
{
  background-color: #00e600
  
}

.err-disable
{
  background-color: #ff9900
  
}

.disabled
{
  background-color: #cc0000
  
}

.notconnect
{
  background-color: #d5d5c3
  
}

＆＃13;

<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>

＆＃13;

Answer 2

请尝试此代码

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

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

2 个答案: