如何使用删除表行功能在表的动态输入字段上插入值
[英]How to insert value on dynamic input field in a table with remove table row functionality
问题描述
I have designed a html table where table rows with data are dynamically generated.In each table row tr , i set 1 table data td for html select tag and 1 table data td for html input tag.So i want to insert the selected option value into its adjacent input field.Also i want to keep a Remove functionality to remove each table row. 
我已经设计其中具有数据表中的行被动态generated.In每个表行中的HTML表格tr ，我设置1个表数据td为HTML选择标记和1个表数据td对HTML输入tag.So我要插入所选择的选项值到其相邻的输入字段中。我还想保留“删除”功能以删除每个表行。
Here is my code: 这是我的代码：
$(document).on('change', '#mySelect', function() { if ($(this).val != 0) { $('.amount').val($(this).val()); } else { $('.amount').val(''); } }); $('#remScnt').live('click', function() { if( i > 2 ) { $(this).parent('tr').remove(); i--; } return false; });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style> table, th, td { border-collapse: collapse; margin: 10px auto; } </style> <script> function addMore() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); var cell1 = row.insertCell(-1); var cell2 = row.insertCell(-1); var x = document.getElementById("myTable").rows[1].cells; cell1.innerHTML = x[0].innerHTML; cell2.innerHTML = x[1].innerHTML; } function removeLast() { document.getElementById("myTable").deleteRow(-1); } function removeRowNo() { var index = document.getElementById('value').value document.getElementById("myTable").deleteRow(index); } </script> </head> <body> <form action="testlist.php" method="post"> <table id="myTable"> <tr> <th>Items</th> <th>Amount</th> </tr> <tr> <td > <a href="#" id="remScnt">Remove</a> <select id="mySelect" name="DESCRP[]" > <option disabled="" selected="">Select</option> <option value="100">Item-1</option> <option value="200">Item-2</option> <option value="300">Item-3</option> <option value="400">Item-4</option> <option value="500">Item-5</option> </select> </td> <td> <input type="text" class="amount" name="ALAMT[]"></td> </tr> </table> <table> <tr> <td><input type="submit" /> </td> </tr> </table> </form> <br> <table> <tr> <td><button onclick="addMore()">Add More</button></td> <td><button onclick="removeLast()">Remove Last Row</button></td> </tr> <tr> <td><input type="text" maxlength="3" name="value" id='value'></td> <td><button onclick="removeRowNo()">Remove By Row No.</button></td> </tr> </table> </body> </html>
So the problem is all inputs are taking same option values. 因此，问题在于所有输入都采用相同的选项值。 i think it is due to lack of uniqueness of each input tag as i use class instead of id .Also Remove hyperlink not working.please help. 我认为这是由于每个输入标签缺乏唯一性，因为我使用class而不是id 。也请Remove超链接不起作用。请帮助。
1 个解决方案
解决方案1
1 已采纳 2016-02-12 02:19:20
Like said, you should use class instead of id , and look closely on change event handler i make, same goes to remove functionality, see following code : 就像说的那样，您应该使用class而不是id ，并仔细查看我所做的更改事件处理程序，同样要删除功能，请参见以下代码：
$('#myTable').on('change', '.mySelect', function() { // you can use .closest() to find // particular input on same row with select $(this).closest('tr').find('.amount').val($(this).val()); }); $('#myTable').on('click','.remScnt', function(e) { e.preventDefault(); // find the tr element of remove link // which is a parent $(this).closest('tr').remove() });
<!DOCTYPE html> <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> <style> table, th, td { border-collapse: collapse; margin: 10px auto; } </style> <script> function addMore() { var table = document.getElementById("myTable"); var row = table.insertRow(-1); var cell1 = row.insertCell(-1); var cell2 = row.insertCell(-1); var x = document.getElementById("myTable").rows[1].cells; cell1.innerHTML = x[0].innerHTML; cell2.innerHTML = x[1].innerHTML; } function removeLast() { var tableTr = document.getElementById("myTable").rows.length; if ( tableTr > 1 ) document.getElementById("myTable").deleteRow(-1); } function removeRowNo() { var index = document.getElementById('value').value document.getElementById("myTable").deleteRow(index); } </script> </head> <body> <form action="testlist.php" method="post"> <table id="myTable"> <tr> <th>Items</th> <th>Amount</th> </tr> <tr> <td > <a href="#" class="remScnt">Remove</a> <select class="mySelect" name="DESCRP[]" > <option disabled="" selected="">Select</option> <option value="100">Item-1</option> <option value="200">Item-2</option> <option value="300">Item-3</option> <option value="400">Item-4</option> <option value="500">Item-5</option> </select> </td> <td> <input type="text" class="amount" name="ALAMT[]"></td> </tr> </table> <table> <tr> <td><input type="submit" /> </td> </tr> </table> </form> <br> <table> <tr> <td><button onclick="addMore()">Add More</button></td> <td><button onclick="removeLast()">Remove Last Row</button></td> </tr> <tr> <td><input type="text" maxlength="3" name="value" id='value'></td> <td><button onclick="removeRowNo()">Remove By Row No.</button></td> </tr> </table> </body> </html>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.