如何在具有删除表行功能的表中的动态输入字段上插入值

时间:2016-02-12 02:14:18

标签: javascript jquery html

我设计了一个html表,其中包含数据的表行是动态生成的。在每个表行tr中,我为html select标记和1个表数据{{1}设置了1个表数据td对于html输入标记。所以我想将选定的选项值插入到其相邻的输入字段中。另外我想保留一个删除功能来删除每个表格行。

这是我的代码:

td
        
         

$(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>代替class时缺少每个输入标记的唯一性。id超链接也不起作用。请帮助。

1 个答案:

答案 0 :(得分:1)

如上所述,您应该使用INSERT INTO production.spend_fact (date, client_id, show_name, network_name, media_type, spend, load_id, note) SELECT date, client_id, show_name, network_name, media_type, spend, l.load_id, note FROM staging.spend_fact CROSS JOIN (SELECT MAX(load_id) AS load_id FROM production.load_dim ) l; 而不是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()
});