如何将一个表中的一行的内容复制到另一张表并添加相同的内容
[英]How to copy the contents of one row in a table to another table and add the identical ones
问题描述
var Sell_Button = document.getElementById('sellbtn'), secondTable = document.getElementById("secondTableBody"); Sell_Button.addEventListener('click', function() { var Row = secondTable.insertRow(); for (var c = 0; c < 2; c += 1) { Row.insertCell(c); } Row.cells[0].innerHTML = this.parentNode.parentNode.cells[0].innerHTML; Row.cells[2].innerHTML = this.parentNode.parentNode.cells[1].innerHTML; //checks to see if the secondTable has a row containing the same name for (var f = 0; f < secondTable.rows.length; f += 1) { //adds only the sold amount if the second table has a row with the same name //error if (secondTable.rows[f].cells[0].innerText === this.parentNode.parentNode.cells[0].innerText) { secondTable.rows[f].cells[1].innerHTML = +this.parentNode.parentNode.cells[2].innerHTML; //deletes an extra row that is added at the bottom if (secondTable.rows.length > 1) { secondTable.deleteRow(secondTable.rows.length - 1); } //if nothing matched then a new row is added } else { secondTable.insertRow(); Row.cells[0].innerHTML = this.parentNode.parentNode.cells[0].innerHTML; Row.cells[1].innerHTML = this.parentNode.parentNode.cells[2].innerHTML; } } } }
<html> <body> <div id="firstTableDiv"> <table border="1" id="firstTable"> <thead> <th>Item</th> <th>Stock</th> <th colspan="1">Sold</th> </thead> <tbody id="firstTableBody"> <tr> <td>Apples</td> <td>300</td> <td>200</td> <td> <button id="sellbtn">Sell</button> </td> </tr> <tr> <td>Apples</td> <td>300</td> <td>100</td> <td> <button id="sellbtn">Sell</button> </td> </tr> <tr> <td>Oranges</td> <td>400</td> <td>300</td> <td> <button id="sellbtn">Sell</button> </td> </tr> </tbody> </table> </div> </br> <div id="secondTableDiv"> Sold <table border="1" id="secondTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="secondTableBody"> </tbody> </table> </div> </body> </html>
Ok, this example isn't exactly what i'm working on but it's very similar. 
好的，这个例子并不完全是我正在研究的东西，但是非常相似。 The only difference is that in mine the rows and buttons are dynamically added by the user and he inserts the details. 唯一的区别是，在我的系统中，用户动态添加行和按钮，然后用户插入详细信息。 What I want is that when i press on the button of each row (sell) the details (Item and Sold only) are copied into a row in the second table and checks if the same item exists in this second table if so then it adds the amount of sold of both items in one row. 我想要的是，当我按每行（卖出）的按钮时，详细信息（仅限商品和已售出商品）被复制到第二张表的一行中，并检查第二张表中是否存在相同的商品，然后添加一行中两个项目的销售量。 For instance I press on the first row button the Apples it copies the listed above details to the second table in a row and then when i click on the button of the second row (Apples also) it only adds the sold amount up and doesn't add a second apples row because an apples row already exists in the second table but when i click on the oranges button it makes a new row because the oranges row doesn't exist. 例如，我按苹果的第一行按钮，它将上面列出的详细信息复制到第二行中，然后当我单击第二行的按钮（也为苹果）时，它只会增加销售金额，而不会t添加第二个苹果行，因为第二个表中已经存在一个苹果行，但是当我单击“橘子”按钮时，它又创建了一个新行，因为橘子行不存在。 So how do I do this in JavaScript? 那么如何在JavaScript中做到这一点呢？ i hope i was thorough and made any sense. 我希望我能周到并且有任何道理。 I have no idea why the code isn't working here but i hope you get the point. 我不知道为什么代码在这里不起作用，但我希望您明白这一点。 This code works perfectly just as i want it to until for some reason i get this error: Cannot read property 'innerText' of undefined when i press the buttons approx. 这段代码就像我想要的那样完美运行，直到由于某种原因出现此错误：当我大约按下按钮时，无法读取未定义的属性“ innerText”。 6-7 times targeting the if statement where i commented error. 定位6-7次，如果我在其中声明错误的if语句。
2 个解决方案
解决方案1
1 2015-01-19 22:08:51
Do you mean something like: 您的意思是：
$(document).on("click", "#firstTable tr button", function(b) { b = $(this).closest("tr"); var d = $.trim(b.find("td:first").text()); b = parseFloat($.trim(b.find("td:nth-child(3)").text())); var a = $("#secondTable"), c = a.find("tr").filter(function(a) { return $.trim($(this).find("td:first").text()) == d }); c.length ? (a = c.find("td:nth-child(2)"), c = parseFloat($.trim(a.text())), a.text(b + c)) : (a = $("<tr />").appendTo(a), $("<td />", { text: d }).appendTo(a), $("<td />", { text: b }).appendTo(a)) });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <div id="firstTableDiv"> <table border="1" id="firstTable"> <thead> <tr> <th>Item</th> <th>Stock</th> <th colspan="1">Sold</th> </tr> </thead> <tbody id="firstTableBody"> <tr> <td>Apples</td> <td>300</td> <td>200</td> <td><button>Sell</button></td> </tr> <tr> <td>Apples</td> <td>300</td> <td>100</td> <td><button>Sell</button></td> </tr> <tr> <td>Oranges</td> <td>400</td> <td>300</td> <td><button>Sell</button></td> </tr> </tbody> </table> </div> <br /> <div id="secondTableDiv"> Sold <table border="1" id="secondTable"> <thead> <tr> <th>Item</th> <th>Sold</th> </tr> </thead> <tbody id="secondTableBody"></tbody> </table> </div>
解决方案2
1 2015-01-19 22:12:03
This sets a click handler to all buttons. 这会将单击处理程序设置为所有按钮。 If the row doesn't exist in the second table it's created. 如果第二个表中不存在该行，则创建该行。 It sets a data-type referring to the item. 它设置引用该项目的data-type 。 When somebody clicks the sell button again and there is a row containing the data-type the row is updated instead of created. 当有人再次单击“ sell按钮时，将出现一行包含数据类型的行，而不是创建该行。 All in plain JavaScript. 全部使用纯JavaScript。
var Sell_Button = document.querySelectorAll('.sellbtn'), secondTable = document.getElementById("secondTableBody"); Array.prototype.slice.call(Sell_Button).forEach(function(element){ element.addEventListener('click', function(e) { //since the button is an element without children use e. var clickedElement = e.target; var parentRow = clickedElement.parentNode.parentNode; //check if second table has a row with data-type var rowWithData = secondTable.querySelector("[data-type='"+parentRow.cells[0].childNodes[0].nodeValue+"']"); if (rowWithData) { rowWithData.cells[1].innerHTML = parseInt(rowWithData.cells[1].childNodes[0].nodeValue) + parseInt(parentRow.cells[2].childNodes[0].nodeValue); } else { var Row = secondTable.insertRow(); Row.setAttribute("data-type", parentRow.cells[0].childNodes[0].nodeValue); for (var c = 0; c < 2; c += 1) { Row.insertCell(c); } Row.cells[0].innerHTML = parentRow.cells[0].childNodes[0].nodeValue; Row.cells[1].innerHTML = parentRow.cells[2].childNodes[0].nodeValue; } }); });
<html> <body> <div id="firstTableDiv"> <table border="1" id="firstTable"> <thead> <th>Item</th> <th>Stock</th> <th colspan="1">Sold</th> </thead> <tbody id="firstTableBody"> <tr> <td>Apples</td> <td>300</td> <td>200</td> <td> <button class="sellbtn">Sell</button> </td> </tr> <tr> <td>Apples</td> <td>300</td> <td>100</td> <td> <button class="sellbtn">Sell</button> </td> </tr> <tr> <td>Oranges</td> <td>400</td> <td>300</td> <td> <button class="sellbtn">Sell</button> </td> </tr> </tbody> </table> </div> </br> <div id="secondTableDiv"> Sold <table border="1" id="secondTable"> <thead> <th>Item</th> <th>Sold</th> </thead> <tbody id="secondTableBody"> </tbody> </table> </div> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.