我想将动态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;
答案 0 :(得分:0)
我认为下面的代码可以帮助你,而不是忘记添加jquery JS。
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;