使用 onclick 将 table 值传输到另一个 table

Question

我需要帮助，我想知道如何使用 onclick 将 table 行值传输到另一个 table 行中已经知道如何使用 onclick 获取值但不知道如何传输将值放入 table

    <html>

    <body>
    <table class='list'>
    <thead>
    <tr>
        <th class='idno'>ID No.</th>
        <th class='itemn'>Item</th>
        <th class='quant'>Quantity</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Chocolate</td>
        <td>99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bread</td>
        <td>99</td>
    </tr>
    </tbody>
    </table>

    <script>
        var table = document.getElementsByTagName("table")[0];
        var tbody = table.getElementsByTagName("tbody")[0];
        tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
    target = target.parentNode;
    }
    if (target) {
    var cells = target.getElementsByTagName("td");
    for (var i = 0; i < cells.length; i++) {
        data.push(cells[i].innerHTML);
    }
    }
    alert(data);
    };
    </script>
    </body>
    </html>

Answer 1

我修改了你的代码，看看这个

 var table = document.getElementsByTagName("table")[0];
        var tbody = table.getElementsByTagName("tbody")[0];
  
  // get other table you want to insert in
  var t2 =document.getElementById("othertable");
  
        tbody.onclick = function (e) {
    e = e || window.event;
    var data = [];
    var target = e.srcElement || e.target;
    while (target && target.nodeName !== "TR") {
    target = target.parentNode;
    }
    if (target) {
    var cells = target.getElementsByTagName("td");
 
 //insert at zero index
 var tr = t2.insertRow(0)
 
    for (var i = 0; i < cells.length; i++) {
        data.push(cells[i].innerHTML);
  

  var cell = tr.insertCell(i);
  cell.innerHTML = cells[i].innerHTML;
    }
    }
    alert(data);
    };

    <table class='list'>
    <thead>
    <tr>
        <th class='idno'>ID No.</th>
        <th class='itemn'>Item</th>
        <th class='quant'>Quantity</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Chocolate</td>
        <td>99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bread</td>
        <td>99</td>
    </tr>
    </tbody>
    </table>
 <hr/>
<table id="othertable"></table>

Answer 2

您需要创建一些节点。先创建一个<tr>。然后循环以下内容：创建一个 <td>，然后从您已经收集的数据中创建一个文本节点，将文本附加到 <td>，然后将 <td> 附加到 <tr>并重复循环。最后将 <tr> 附加到 table 主体。运行下面的代码片段。

<html>

    <body>
    <table class='list'>
    <thead>
    <tr>
        <th class='idno'>ID No.</th>
        <th class='itemn'>Item</th>
        <th class='quant'>Quantity</th>

    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>Chocolate</td>
        <td>99</td>
    </tr>
    <tr>
        <td>2</td>
        <td>Bread</td>
        <td>99</td>
    </tr>
    </tbody>
    </table>

      <br><br>
      MY NEW TABLE
      <table class='list'>
    <thead>
    <tr>
        <th class='idno'>ID No.</th>
        <th class='itemn'>Item</th>
        <th class='quant'>Quantity</th>

    </tr>
    </thead>
    <tbody id='myNewTableBody'></tbody>
    </table>
    <script>
        var table = document.getElementsByTagName("table")[0];
        var tbody = table.getElementsByTagName("tbody")[0];
        tbody.onclick = function (e) {
            e = e || window.event;
            var data = [];
            var target = e.srcElement || e.target;
            while (target && target.nodeName !== "TR") {
                target = target.parentNode;
            }
            if (target) {
                var cells = target.getElementsByTagName("td");
                for (var i = 0; i < cells.length; i++) {
                    data.push(cells[i].innerHTML);
                }
            }
            var trnode = document.createElement("tr");
          
            for(var i = 0; i < data.length; i++){
                var tdnode = document.createElement("td");
                var textnode = document.createTextNode(data[i]);
                tdnode.appendChild(textnode);
                trnode.appendChild(tdnode);
            }
          
            document.getElementById("myNewTableBody").appendChild(trnode);
            alert(data);
    };
    </script>
    </body>
    </html>

使用 onclick 将 table 值传输到另一个 table

transfer table values into another table using onclick

javascript

onclick