Question

点击ADD按钮后，我又来了一行。我需要它的行类应该通过识别前一行的类来相应地改变。如果上一个行类名是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"); />

Answer 1

为什么不使用正确的CSS：

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

Answer 2

您可以简单地执行以下操作：

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

DEMO HERE

使用javascript动态更改表行类名

2 个答案: