[英]To get dynamic table values
在下面的代碼中,我有一個動態表,我將添加多行並在單擊提交按鈕時輸入值,我希望所有表中的行都值。請幫助我做到這一點。下面提供的代碼請提供參考。
$(document).ready(function () {
var i = 1;
$("#add_row").click(function () {
$('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td>");
$('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
i++;
Test();
});
$("#delete_row").click(function () {
if (i > 1) {
$("#addr" + (i - 1)).html('');
i--;
}
});
});
<div class="row clearfix">
<div class="col-xs-4 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Start Range
</th>
<th class="text-center">
End Range
</th>
<th class="text-center">
Value
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Start Range' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='End Range' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Value' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<input type="button" text="Submit" />
對於刪除行,您無法獲取要刪除的行。
試試這個
$(document).ready(function () {
var i=0;
$("#add_row").click(function () {
i=i+1;
$('#tab_logic tbody').append("<tr><td>" + i + "</td><td><input name='name" + i + "' type='text' placeholder='Name' class='form-control input-md' /> </td><td><input name='mail" + i + "' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile" + i + "' type='text' placeholder='Mobile' class='form-control input-md'></td><td><button type="button" class="delete">Delete</button></td></tr>");
Test();
});
$(".delete").click(function () {
$(this).parent().parent().remove();
});
});
<div class="row clearfix">
<div class="col-xs-4 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Start Range
</th>
<th class="text-center">
End Range
</th>
<th class="text-center">
Value
</th>
<th class="text-center">
Action
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<input type="text" name='name0' placeholder='Start Range' class="form-control"/>
</td>
<td>
<input type="text" name='mail0' placeholder='End Range' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Value' class="form-control"/>
</td>
<td>
<button type="button" class="delete">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.