表中的Javascript复制单元格值
[英]Javascript copy cell value in table
问题描述
I am very new to JavaScript so wanted to ask a very simple basic question. 
我对JavaScript非常陌生，所以想问一个非常简单的基本问题。 I have HTML which is listed below: 我有下面列出的HTML：
<html> <body> <table border="1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> </tr> <tr> <td>CellOneRowOne</td> <td>CellTwoRowOne</td> <td>>>></td> <td>CellFourRowOne</td> </tr> </table> </body> </html>
I want to write a JavaScript function so that when the user clicks on the arrows displayed in the cell 3 of the row, the value from the cell-1 row-1 get copied to cell-4 row-1. 我想编写一个JavaScript函数，以便当用户单击该行的单元格3中显示的箭头时，将单元格1行1中的值复制到单元格4行1中。
3 个解决方案
解决方案1
0 2016-03-05 22:30:55
You'll need to access the 3 elements involved via JavaScript and then set up the cell to be clicked to be able to respond to being clicked by taking one cell value and placing it into another. 您需要通过JavaScript访问涉及的3个元素，然后设置要单击的单元格，以通过将一个单元格值放入另一个单元格值来响应被单击。
<html>
<head>
<script>
var c1r1 = document.getElementById("c1r1");
var cellToClick = document.getElementById("cellToClick");
var c4r1 = document.getElementById("c4r1");
cellToClick.addEventListener("click", function(){
c4r1.innerHTML = c1r1.innerHTML;
});
</script>
</head>
<body>
<table border="1">
<tr>
<th>Column1</th>
<th>Column2</th>
<th>Column3</th>
</tr>
<tr>
<td id="c1r1">CellOneRowOne</td>
<td>CellTwoRowOne</td>
<td id="cellToClick">>>></td>
<td id="c4r1">CellFourRowOne</td>
</tr>
</table>
</body>
</html>
解决方案2
0 已采纳 2016-03-05 22:37:31
Here's both the JS and HTML codes. 这是JS和HTML代码。 Note that you can use that "copy_vals" function for any further row, provided that its input argument is equal to the same index of row including the function call. 请注意，可以将“ copy_vals”函数用于任何其他行，只要其输入参数等于该行的相同索引（包括函数调用）即可。
Being a newbie, you might like to be addressed to invent strategies working in any case (here, whatever the row index is), according to the current environment. 作为新手，根据当前环境，您可能希望发明在任何情况下都适用的策略（此处不管行索引是什么）。
As you see, I wrote it once and I called it twice: the less effort, the more afford ! 如您所见，我写了一次，然后又打了两次：努力越少，买得起的东西就越多！ (as I like to say) （我喜欢说）
Happy coding ! 编码愉快！
function copy_vals(_row_id) { var _src = document.getElementById("cell" + _row_id + "_1"); var _dest = document.getElementById("cell" + _row_id + "_4"); _dest.innerHTML = _src.innerHTML; }
<table> <tr> <td ID="cell1_1">CellOneRowOne</td> <td ID="cell1_2">CellTwoRowOne</td> <td ONCLICK="javascript:copy_vals(1);">>>></td> <td ID="cell1_4">CellFourRowOne</td> </tr> <tr> <td ID="cell2_1">CellOneRowTwo</td> <td ID="cell2_2">CellTwoRowTwo</td> <td ONCLICK="javascript:copy_vals(2);">>>></td> <td ID="cell2_4">CellFourRowTwo</td> </tr> </table>
解决方案3
0 2016-03-05 22:55:53
This adds an event to every arrow, which is not the most performant choice, but if your table/page is small, it shouldn't matter and is easier to manage the code. 这会向每个箭头添加一个事件，这并不是最有效的选择，但是如果您的表/页面很小，则没关系，并且更容易管理代码。
function copyCell(e) { var link = this, td = link.parentNode, tr = td.parentNode, cells = tr.children; cells[3].innerHTML = cells[0].innerHTML; } var links = document.querySelectorAll('td:nth-child(3) :link'); for (var i=0,n=links.length; i<n; i++){ var link = links[i]; link.addEventListener('click', copyCell, false); }
td { text-align: center; } td:nth-child(3) :link{ text-decoration: none; }
<html> <body> <table border="1"> <tr> <th>Column1</th> <th>Column2</th> <th>Column3</th> </tr> <tr> <td>CellOneRowOne</td> <td>CellTwoRowOne</td> <td><a href="#" onclick="javascript:return false;">→</span></td> <td>CellFourRowOne</td> </tr> <tr> <td>foo</td> <td>bar</td> <td><a href="#" onclick="javascript:return false;">→</span></td> <td></td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.