将动态sr.no添加到表行

时间:2017-07-25 16:46:41

标签: jquery html css html5 css3

我想将动态sr.nos添加到动态添加的行中。我已经完成了动态行添加功能,但我陷入动态添加sr.no 请帮我解决这个问题。还建议我在我的行中添加代码时是否需要更新。

我的代码如下



    $(document).ready(function() {

            $('.del').live('click', function() {
                $(this).parent().parent().remove();
            });

            $('.add').live('click', function() {
                $(this).val('Delete');
                $(this).attr('class', 'del');
                var appendTxt = "<tr> <td>1</td> <td> <select id='additems' name='additems' class='form-control' required='required'> <option selected>-- Select --</option> <option><a href='' id='addnewpo'>Add new</a></option> <option value='1'> Abc </option> <option value='2'> IT services </option> <option value='3'> JS Enterprises</option> </select> </td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control' disabled></td> <td> <select id='tax' name='tax' class='form-control' required='required'> <option selected>-- Select --</option> <option>NA</option> <option value='0'> 0 </option> <option value='3'> 3% </option> <option value='5'>5%</option> <option value='12'>12%</option> <option value='18'>18%</option> <option value='28'>28%</option> </select> </td> <td width='2%'><input type='button' class='add' value='Add More' /> </td> </tr>";
                $("tr:last").after(appendTxt);
            });
        });
&#13;
<table id="potable" class="table table-bordered table-striped dt-responsive nowrap" width="100%">
        <thead>
            <tr>
                <th width="5%">Sr.no</th>
                <th width="20%">Items</th>
                <th>Description</th>
                <th>Price</th>
                <th>Qty</th>
                <th>Unit</th>
                <th>Amount</th>
                <th>Tax</th>
                <th></th>
            </tr>
        </thead>
        <tbody>

            <tr>
                <td>1</td>
                <td>
                    <select id="additems" name="additems" class="form-control" required="required">                                                
                    <option selected>-- Select --</option>
                    <option><a href="" id="addnewpo">Add new</a></option>
                    <option value="1"> Abc </option>
                    <option value="2"> IT services </option>
                    <option value="3"> JS Enterprises</option>
                </select>
                </td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control"></td>
                <td><input type="text" class="form-control" disabled></td>
                <td>
                    <select id="tax" name="tax" class="form-control" required="required">                                                
                    <option selected>-- Select --</option>
                    <option>NA</option>
                    <option value="0"> 0 </option>
                    <option value="3"> 3% </option>
                    <option value="5">5%</option>
                    <option value="12">12%</option>
                    <option value="18">18%</option>
                    <option value="28">28%</option>
                </select>
                </td>
                <td width="2%">
                    <input type='button' class='add' value='Add More' /> </td>
            </tr>
        </tbody>
    </table>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:0)

我认为下面的代码可以帮助你,而不是忘记添加jquery JS。

&#13;
&#13;
var NoOfRows = document.getElementById('potable').rows.length - 1;
var RowId = NoOfRows + 1;
var appendTxt = "<tr id="+RowId+"> <td>"+RowId+"</td> <td> <select id='additems' name='additems' class='form-control' required='required'> <option selected>-- Select --</option> <option><a href='' id='addnewpo'>Add new</a></option> <option value='1'> Abc </option> <option value='2'> IT services </option> <option value='3'> JS Enterprises</option> </select> </td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control'></td> <td><input type='text' class='form-control' disabled></td> <td> <select id='tax' name='tax' class='form-control' required='required'> <option selected>-- Select --</option> <option>NA</option> <option value='0'> 0 </option> <option value='3'> 3% </option> <option value='5'>5%</option> <option value='12'>12%</option> <option value='18'>18%</option> <option value='28'>28%</option> </select> </td> <td width='2%'><input type='button' class='add' value='Add More' /> </td> </tr>";                
$('#potable > tbody:last-child').append(appendTxt);
&#13;
&#13;
&#13;