使用jQuery动态自动增加HTML表行值

Question

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();
});

Answer 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.