0

点击添加按钮后，我又得到了一行。我需要通过识别前一行的类来相应地改变它的行类。如果上一行的类名是odd新创建的类名，则应even以此类推。我们如何通过使用 javascript 来做到这一点？我们如何修改现有代码来执行此操作或任何其他建议？
适当的CSS文件已准备好用于替代类名。当我从数据库中获取数据时，将创建交替的奇/偶行。但是当我点击添加按钮时，它总是取第一行类名，因为总是有第一行的克隆。除了类名外，我不担心克隆行。

<script>
function addRow(tableID) {
  var table = document.getElementById(tableID);
  if (!table) return;

  var newRow = table.rows[1].cloneNode(true);


  // Now get the inputs and modify their names 
  var inputs = newRow.getElementsByTagName('input');

  for (var i=0, iLen=inputs.length; i<iLen; i++) {
    // Update inputs[i]
  }
  // Add the new row to the tBody (required for IE)
  var tBody = table.tBodies[0];
  tBody.insertBefore(newRow, tBody.lastChild);
}


</script>

<table id="table1" border=1 class="display">
        <tr class="odd">
            <th>Operator ID</th>
            <th>Status</th>
        </tr>
        <tr class="odd">  
            <td>TestA</td>
            <td>ActiveA</td>
        </tr>
        <tr class="even">  
            <td>TestB</td>
            <td>ActiveB</td>
        </tr>
</table>
<input type="button" value="ADDROW" onclick=addRow("table1"); />
4

2 回答 2

2

为什么不直接使用正确的 CSS：

#table1 tr {
    /* odd row styles */
    /* also acts as fallback for really old browsers */
}
#table1 tr:nth-child(even) {
    /* even row styles */
}
于 2013-04-01T13:38:27.973 回答
1

你可以简单地做这样的事情：

tr:nth-child(even) td {
    background-color: #ccc;
}
tr:nth-child(odd) td {
    background-color: #fff;
}

在这里演示

于 2013-04-01T13:52:40.163 回答