Javascript copy cell value in table
Question
I am very new to JavaScript so wanted to ask a very simple basic question. I have HTML which is listed below:
<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.
3 answers
solution1
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.
<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>
solution2
0 ACCPTED 2016-03-05 22:37:31
Here's both the JS and HTML codes. 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.
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>
solution3
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.