使用onclick将表值转移到另一个表中

时间:2016-01-15 05:02:46

标签: 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> 

2 个答案:

答案 0 :(得分:0)

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

Error invoking Method 'updateRoles': Internal server error [500]
 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);
    };

答案 1 :(得分:0)

您需要创建一些节点。首先创建<tr>。然后循环以下内容:创建<td>,然后根据您已收集的数据创建文本节点,将文本附加到<td>,然后将<td>添加到<tr>并重复循环。最后将<tr>附加到表格主体。运行下面的代码段。

&#13;
&#13;
<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>
&#13;
&#13;
&#13;