文章/答案/技术大牛

发布

社区首页 >问答首页 >如何将一个表中一行的内容复制到另一个表中并添加相同的内容

问如何将一个表中一行的内容复制到另一个表中并添加相同的内容
EN

Stack Overflow用户

提问于 2015-01-20 05:40:03

回答 2查看 909关注 0票数 0

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>

好吧，这个例子不完全是我正在做的，但它非常相似。唯一的区别是，在我的应用程序中，行和按钮是由用户动态添加的，并且他会插入细节。我想要的是，当我按下每一行的按钮(sell)时，详细信息(Item和Sold only)被复制到第二个表中的一行中，并检查第二个表中是否存在相同的项目，如果存在，则将一行中两个项目的sold数量相加。例如，我按下第一行按钮Apples，它会将上面列出的详细信息复制到一行中的第二个表中，然后当我单击第二行的按钮(也是apples )时，它只会将销售金额相加，而不会添加第二个apples行，因为第二个表中已经存在一个apples行，但当我单击oranges按钮时，它会生成一个新行，因为oranges行不存在。那么我如何在JavaScript中做到这一点呢？我希望我是彻底的和有意义的。我不知道为什么代码不能在这里工作，但我希望您能明白这一点。这段代码就像我想要的那样工作得很好，直到由于某种原因我得到这样的错误:当我按下按钮时，无法读取未定义的属性'innerText‘。6-7次针对我注释错误的if语句。

javascript

jquery

html

回答 2

Stack Overflow用户

发布于 2015-01-20 06:08:52

你是指像这样的东西吗：

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

票数 1

Stack Overflow用户

发布于 2015-01-20 06:12:03

这将为所有按钮设置一个单击处理程序。如果该行不存在于第二个表中，则创建该行。它设置一个引用该项的data-type。当有人再次单击sell按钮，并且有一行包含该数据类型时，将更新该行，而不是创建该行。所有这些都是在纯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>

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/28033933

复制

相似问题

问如何将一个表中一行的内容复制到另一个表中并添加相同的内容
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将一个表中一行的内容复制到另一个表中并添加相同的内容EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何将一个表中一行的内容复制到另一个表中并添加相同的内容
EN