Question

    <!DOCTYPE html>
<html>
<body>
<!--External table-->
 <table border="1px">
 <tr>

                   <td>
                   //price and quantity fields
                   <input type="text" name="price" label="Price" id="Pri">
                   <input type="text" name="quantity" label="Quantity" id="Qty">
                   </td>
                   <td>
       <!--internal table-->
     <table border="1px">
                   <tr>
                       <th>Price</th>
                       <th>Quantity</th>
                       <th>Action</th>
                   </tr>
                    <tr>
                       <td>1</td>
                       <td>2</td>
                       <td><input type="checkbox" id="checx"/></td>
                 </tr> 
                        <tr>
                       <td>11</td>
                       <td>22</td>
                       <td><input type="checkbox" id="checx"/></td>
                   </tr> 
                   <tr>
                       <td>111</td>
                       <td>222</td>
                       <td><input type="checkbox" id="checx"/></td>
                   </tr> 
                    <tr>
                       <td>10</td>
                       <td>20</td>
                       <td><input type="checkbox" /></td>
                   </tr> 
                   </table>   
                   </td>
                   </tr>

                   </table>
                   //Javascript
                   <script type="text/javascript">       
 checkboxes = document.getElementById("checx").getElementsByTagName("input"); 
for (var i = 0; i < checkboxes.length; i++) {
    var checkbox = checkboxes[i];
    checkbox.onclick = function() {
        var currentRow = this.parentNode.parentNode;
        var secondColumn = currentRow.getElementsByTagName("td")[1];
         var FirstColumn = currentRow.getElementsByTagName("td")[0];
        alert("My text is: " + secondColumn.textContent +" "+ FirstColumn.textContent);
    };
} 
 document.getElementById("Pri").value=secondColumn.textContent;
 document.getElementById("Qty").value=FirstColumn.textContent;

       </script>
//I have a dynamic table on the above pattern.I  want in such a way that when I click on the checkbox on the internal table it should copy the values and should show on the input boxes on the corresponding row on the external table.
</body>
</html>

我在上面的模式中有一个动态表，我想要这样一种方式：当我单击内部表上的复选框时，它应该复制值并应该显示在外部表上对应行的输入框中

非常感谢您的帮助

Answer 1

复选框ID每个元素必须唯一的主要问题是，因此您必须依赖于类名而不是复选框ID 除了以下代码

document.getElementById("Pri").value=secondColumn.textContent;
document.getElementById("Qty").value=FirstColumn.textContent;

必须在事件处理程序中

<!DOCTYPE html>
<html>
<body>
<!--External table-->
 <table id="parentTable" border="1px">
 <tr>

                   <td>
                   //price and quantity fields
                   <input type="text" name="price" label="Price" id="Pri">
                   <input type="text" name="quantity" label="Quantity" id="Qty">
                   </td>
                   <td>
       <!--internal table-->
     <table border="1px">
                   <tr>
                       <th>Price</th>
                       <th>Quantity</th>
                       <th>Action</th>
                   </tr>
                    <tr>
                       <td>1</td>
                       <td>2</td>
                       <td><input type="checkbox" id="checx1" class="checx"/></td>
                 </tr> 
                        <tr>
                       <td>11</td>
                       <td>22</td>
                       <td><input type="checkbox" id="checx2" class="checx"/></td>
                   </tr> 
                   <tr>
                       <td>111</td>
                       <td>222</td>
                       <td><input type="checkbox" id="checx3" class="checx"/></td>
                   </tr> 
                    <tr>
                       <td>10</td>
                       <td>20</td>
                       <td><input type="checkbox" id="checx4" class="checx" /></td>
                   </tr> 
                   </table>   
                   </td>
                   </tr>

                   </table>
            //Javascript
                   <script type="text/javascript">       
    checkboxes = document.getElementsByClassName("checx"); 
    for (var i = 0; i < checkboxes.length; i++) {
        var checkbox = checkboxes[i];
    checkbox.onclick = function() {
            var currentRow = this.parentNode.parentNode;
            var secondColumn = currentRow.getElementsByTagName("td")[1];
             var FirstColumn = currentRow.getElementsByTagName("td")[0];
            alert("My text is: " + secondColumn.textContent +" "+FirstColumn.textContent);
            document.getElementById("Pri").value=secondColumn.textContent;
            document.getElementById("Qty").value=FirstColumn.textContent;
        };
    } 
       </script> 
</body>
</html>

单击复选框将内部表值复制到外部表中

1 个答案: