使用 ONCLICK 将表值传输到另一个表中

transfer table values into another table using onclick

本文关键字：另一个 传输 值传 ONCLICK 使用      更新时间：2023-09-26
我需要帮助，我想知道如何使用 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>追加到表体。运行下面的代码片段。

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

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

 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>

相关文章：