0

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"); />
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 に答える