CODEWITHSUNDEEP
javascriptjqueryhtml
user5005768Himadree
user5005768Himadree

Reputation: 1437

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.

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.

Upvotes: 0

Views: 4933

Answers (1)

Norlihazmey Ghazali
Norlihazmey Ghazali

Reputation: 9060

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 :

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

Upvotes: 1

Related Questions