javascript - 使用 javascript 函数交换 html 表中的 2 列

Question

我需要编写一个 Javascript 函数来将第二列与第三列交换，我们将打开控制台并编写您的函数，然后调用它进行测试。

索引.html

    <table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="400" cellspacing="0" cellpadding="0"
        border="1">
        <tbody>
            <tr>
                <td> A1 </td>
                <td> A2 </td>
                <td> A3 </td>
            </tr>
            <tr>
                <td> B1 </td>
                <td> B2 </td>
                <td> B3 </td>
            </tr>
            <tr>
                <td> C1 </td>
                <td> C2 </td>
                <td> C3 </td>
            </tr>
        </tbody>
    </table>

script.js（到目前为止）

function swap(){
    //Write your code here

    var tRows = document.getElementById('tabel1').children[0].children;

    var column2 = [];
    var column3 = [];


    for(var i = 0; i < tRows.length; i++) {
        column2[i] = tRows[i].children[1];
        column3[i] = tRows[i].children[2];
    }

    console.log("cell2 " , column2);
    console.log("cell3 " , column3);

}

swap();

标签： javascripthtmldom

Answer 1

单独试试这个（不需要围绕它的功能 - 只需将它直接放在浏览器控制台中）：

document.querySelectorAll('#tabel1 tr').forEach(tr=>tr.append(tr.querySelectorAll('td')[1]))

对于表的每一行，这可以通过将第二个（索引 1）td 附加到行的末尾来实现。当你在某处追加一个元素时，它会从原来的位置移除。

function swap(){
     document.querySelectorAll('#tabel1 tr')
         .forEach(tr=>tr.append(tr.querySelectorAll('td')[1]))
}
swap();

<table style="margin:auto;" id="tabel1" class="mytabel" width="300" height="400" cellspacing="0" cellpadding="0"
       border="1">
  <tbody>
    <tr>
      <td> A1 </td>
      <td> A2 </td>
      <td> A3 </td>
    </tr>
    <tr>
      <td> B1 </td>
      <td> B2 </td>
      <td> B3 </td>
    </tr>
    <tr>
      <td> C1 </td>
      <td> C2 </td>
      <td> C3 </td>
    </tr>
  </tbody>
</table>