1

I have an HTML table as follows.

<table id="items">

     <tbody>

      <tr>
          <th>SlNo</th>
          <th>Item</th>

          <th>Unit Cost</th>
          <th>Quantity</th>
          <th>Price</th>
      </tr>


       <tr class="item-row">
         <td class="item-name">
          <div class="delete-wpr"><input type="text" value="1" class="slno"/> <a class="delete" href="javascript:;" title="Remove row">X</a></div></td>

           <td><input type="text" class="slno"/></td>           

          <td><input type="text" class="cost"/></td>
          <td><input type="text" class="qty"/></td>
          <td><span class="price"></span></td>
      </tr>  



    <input type="button" value="submit" onClick="storeAndShowTableValues()"/>


    </tbody>

 <tr id="hiderow">
        <td colspan="5"><a id="addrow" title="Add a row">Add a row</a></td>
        <!-- href="javascript:;" --> 
      </tr>

</table>

The add button perfectly works and all. And the Sl:no increases as each row is added. I can also delete the rows too. But the problem is with numbers. Imagine that there are 7 rows. If I delete 6 th row, then the rows should readjust. So I am thinking, whenever a row gets deleted, call some jQuery function, which would reset all the numbers from first row in the incremental order. I am using the following functions in jQuery, but it doesn't work.

The following Add row script WORKS PERFECTLY.

 $("#addrow").click(function(){
index1++;
window.globalCounter++;
$(".item-row:last").after('<tr class="item-row"><td class="item-name"><div class="delete-wpr"><input type="text" value="'+index1+'" class="slno"/><a class="delete" href="javascript:;" title="Remove row">X</a></div></td><td><input type="text" class="slno"/></td><td><input type="text" class="cost"/></td><td><input type="text" class="qty"/></td><td><span class="price"></span></td></tr>');


if ($(".delete").length > 0) $(".delete").show();
bind();

});

The delete row function also works, but the script to re-order table indexes doesnt work. SO I am thinking about, once the button has been pressed to delete a row, execute a jQuery which removes the selected row at first, and then reset the indexes of all the numbers from 1.

 $('#items').on('click', ".delete", function(){


     $('#items').find('tr').find('td:first').each(function(index){   //This function doesnt work. 
    $(this).text(index+1);
});

    $(this).parents('.item-row').remove();


    if ($(".delete").length < 2) $(".delete").hide();
});
1

1 Answer 1

1

An easy way would be to forget the number you are using now and set name attributes on the inputs. If you make them arrays, they will be sent in automatically as a 0-indexed list:

<input name="slno[]" type="text" class="slno"/>
// etc.

Now you can easily serialize your form, send it in and process it at the backend without having to build the data manually.

2
  • And how would I give serial values like 1,2,3.....etc to the slno[] value? And how will the indexes reorder when a particular row is deleted?
    – user5810512
    Jan 20, 2016 at 15:42
  • @AkhilKPAULOSE Like I said, the browser or jQuery (using serialize) will do that automatically when you send the post.
    – jeroen
    Jan 20, 2016 at 16:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.