如何在表中的動態輸入字段中插入值，並刪除表格行功能

我設計了一個html表格，其中表格行中的數據是動態生成的。在每個表格行tr中，我設置了1個表格數據td for html select tag和1個表格數據td爲html輸入標籤。所以我想插入選定的選項值到其相鄰的輸入字段。我還想保留刪除功能來刪除每個表格的行。如何在表中的動態輸入字段中插入值，並刪除表格行功能

這裏是我的代碼：

  
 
      
 

 
$(document).on('change', '#mySelect', function() { 
 
    if ($(this).val != 0) { 
 
    $('.amount').val($(this).val()); \t \t \t 
 
    } 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。另外還有Remove超鏈接沒有working.please幫助。

來源

2016-02-12 user5005768

就像說，你應該使用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()); \t \t 
 
    
 
}); 
 

 

 

 
$('#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>

來源

2016-02-12 02:19:20

感謝@Norlihazmey加扎利。也可以請'幫助我'刪除'行。謝謝 – user5005768

查看更新的答案 –

謝謝你@Norlihazmey Ghazali.It工作。你能告訴我你爲什麼在Remove上使用'e.preventDefault（）;'嗎？ – user5005768

如何在表中的動態輸入字段中插入值，並刪除表格行功能

回答

相關問題