单击复选框将内部表值复制到外部表 //价格和数量字段价格量行动 1. 2. 11 22 111 222 10 20 //Javascript 复选框=document.getElementById（“checx”）.getElementsByTagName（“输入”）；对于（变量i=0；i_Javascript_Jquery

单击复选框将内部表值复制到外部表 //价格和数量字段价格量行动 1. 2. 11 22 111 222 10 20 //Javascript 复选框=document.getElementById（“checx”）.getElementsByTagName（“输入”）；对于（变量i=0；i

javascript jquery

单击复选框将内部表值复制到外部表 //价格和数量字段价格量行动 1. 2. 11 22 111 222 10 20 //Javascript 复选框=document.getElementById（“checx”）.getElementsByTagName（“输入”）；对于（变量i=0；i,javascript,jquery,Javascript,Jquery,我在上面的模式上有一个动态表。我希望这样，当我单击内部表上的复选框时，它应该复制值，并且应该显示在外部表相应行的输入框上提前感谢您的帮助主要问题是每个元素的复选框ID必须是唯一的，因此您必须依赖于类名而不是复选框的ID 除了以下代码之外 <!DOCTYPE html> <html> <body>  <table border="1px"> <tr>

我在上面的模式上有一个动态表。我希望这样，当我单击内部表上的复选框时，它应该复制值，并且应该显示在外部表相应行的输入框上

提前感谢您的帮助

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

    <!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>

必须位于事件处理程序内部

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


//价格和数量字段
价格
量
行动
1.
2.
11
22
111
222
10
20
//Javascript
复选框=document.getElementsByClassName（“checx”）；
对于（变量i=0；i

Price and quantity将出现多行，如何检测特定行复选框并复制这些行value@KarthikaRam已使用var currentRow=this.parentNode.parentNode获取当前行；这里所指的点击复选框id对于每一行都是相同的，它是如何基于id而不是基于当前来决定的。您可以展示如何基于当前行而不是基于id来获取该关键字在事件处理程序中表示当前点击的复选框。onclick=function（）{this}；不需要通过身份证

<!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>