我正在动态地向表格添加行,现在我正在尝试编辑表格行。
我单击编辑,在编辑值后,值在文本框中输入我单击添加按钮,但我创建的新行未更新。
我的代码中的任何错误
<form class="form-horizontal" role="form" id="chargesForm">
<div class="col-md-6">
<div class="form-group ">
<label for="minAmt" class="col-lg-4 control-label">MinAmmount</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="minAmt" name="minAmt" />
</div>
</div>
<div class="form-group ">
<label for="maxAmt" class="col-lg-4 control-label">MaxAmmount</label>
<div class="col-lg-6">
<input type="text" class="form-control" id="maxAmt" name="maxAmt"/>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group ">
<label for="type" class="col-lg-4 control-label">Type</label>
<select size="1" id="type" name="type">
<option value="Flat" selected="selected">
Flat
</option>
<option value="Percentage">
Percentage
</option>
</select>
</div>
</div>
<div class="col-md-12">
<div class="form-actions btnzone">
<button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;margin-left: 40%;" id="savebutton" ><i class="icon-check-sign" aria-hidden="false"></i>Add</button>
<a class="btn btn-danger" ><i class=""></i>Back</a>
</div>
</div>
</form>
<form class="form-horizontal" role="form" id="chargestableForm">
<div class="col-md-12" style="height:150px;overflow:auto;margin-top:5px;">
<table id="charges" class="table table-hover" width="100%" cellspacing="0" style="border: 1px; height:10px;" >
<thead style="background-color:#CCE5FF">
<tr>
<th>MinAmmount</th>
<th>MaxAmmount</th>
<th>Type</th>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
</form>
我在 jquery 的帮助下添加了行
var i=0;
$("button#savebutton").click(function(){
var minAmt=$("#minAmt").val();
var maxAmt=$("#maxAmt").val();
var type=$("#type").val();
i++;
var new_row = "<tr id='row"+i+"' class='info'><td class='minAmt'>" + minAmt + "</td><td class='maxAmt'>" + maxAmt + "</td><td class='type'>" + type + "</td><td><span class='editrow'><a class='fa fa-edit' href='javascript: void(0);'></a></span></td><td><span class='deleterow'><a class='glyphicon glyphicon-trash' href=''></a></span></tr>";
$("table tbody").append(new_row);
$("#minAmt").val($('td.maxAmt').last().text()).prop("disabled","disabled");
$("#maxAmt").val('');
//$("#type").val('');
});
$(document).on('click', 'span.deleterow', function () {
$(this).parents('tr').remove();
return false;
});
$(document).on('click', 'span.editrow', function () {
$("#minAmt").val($(this).closest('tr').find('td.minAmt').text()).prop("disabled","disabled");
$("#maxAmt").val($(this).closest('tr').find('td.maxAmt').text()).prop("disabled","disabled");
$("#type").val($(this).closest('tr').find('td.type').text());
});
replaceWith()
添加隐藏字段以指示正在编辑的行。
<input type="hidden" id="currentRow"/>
在编辑
$(document).on('click', 'span.editrow', function () {
$("#currentRow").val($(this).closest("tr").attr("id"));
}):
在编辑模式下单击保存,创建一个带有更新值的新行模板,并用新行替换现有行。
$("button#savebutton").click(function(){
if($("#currentRow").val()){
var row = $("table tbody").find('#'+$("#currentRow").val());
// var updated_row = //Updated template of the existing row
row.replaceWith (updated_row);
$("#currentRow").val("");
}
});
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句