javascript - 使用javascript动态更改表行类名称

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

<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"); />

最佳答案

为什么不使用正确的CSS：

#table1 tr {
    /* odd row styles */
    /* also acts as fallback for really old browsers */
}
#table1 tr:nth-child(even) {
    /* even row styles */
}

关于javascript - 使用javascript动态更改表行类名称，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/15744522/