javascript - 使用 onclick 将表值传输到另一个表

标签 javascript onclick

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

    <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> 

最佳答案

您需要创建一些节点。创建 <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>

关于javascript - 使用 onclick 将表值传输到另一个表,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34804698/

相关文章:

javascript - SignalR Javascript 客户端 - 调用方法工作但 promise 不起作用(???)

javascript JSON 和 Array 元素,帮助我理解有关引号的规则

javascript - 检查给定对象的属性是否存在

JavaScript,迭代类并单击显示隐藏的 tr

android - 如何检测对 ActionBar 标题的点击?

javascript - 在PHP循环中播放声音onclick

reactjs - OnClick 在使用 React JS 和 webpack 的移动设备上无法正常工作

javascript - 正则表达式匹配字符串模式和数字(url格式)

javascript - 在 JointJS 中显示隐藏元素

android - Android 中弹出窗口的 OnClick 事件