表中的Javascript復制單元格值

Question

我對JavaScript非常陌生，所以想問一個非常簡單的基本問題。 我有下面列出的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>

我想編寫一個JavaScript函數，以便當用戶單擊該行的單元格3中顯示的箭頭時，將單元格1行1中的值復制到單元格4行1中。

Answer 1

您需要通過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>

Answer 2

這是JS和HTML代碼。 請注意，可以將“ copy_vals”函數用於任何其他行，只要其輸入參數等於該行的相同索引（包括函數調用）即可。

作為新手，根據當前環境，您可能希望發明在任何情況下都適用的策略（此處不管行索引是什么）。

如您所見，我寫了一次，然后又打了兩次：努力越少，買得起的東西就越多！ （我喜歡說）

編碼愉快！

 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>

Answer 3

這會向每個箭頭添加一個事件，這並不是最有效的選擇，但是如果您的表/頁面很小，則沒關系，並且更容易管理代碼。

 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;">&rarr;</span></td> <td>CellFourRowOne</td> </tr> <tr> <td>foo</td> <td>bar</td> <td><a href="#" onclick="javascript:return false;">&rarr;</span></td> <td></td> </tr> </table> </body> </html>

表中的Javascript復制單元格值

問題描述

3 個解決方案

解決方案1
0 2016-03-05 22:30:55

解決方案2
0 已采納 2016-03-05 22:37:31

解決方案3
0 2016-03-05 22:55:53

表中的Javascript復制單元格值

問題描述

3 個解決方案

解決方案1 0 2016-03-05 22:30:55

解決方案2 0 已采納 2016-03-05 22:37:31

解決方案3 0 2016-03-05 22:55:53

解決方案1
0 2016-03-05 22:30:55

解決方案2
0 已采納 2016-03-05 22:37:31

解決方案3
0 2016-03-05 22:55:53