例如:需要操作如下图的一个表单,单击加号可新增一行,单击叉可以去掉一行,前台如果实现?
实现分为三部分
1.初始化数据.(可根据需求定义)
$(function () {
var vals = $("#hidVals").val(); //获取初始化的原始数据
if (vals != "") {
var aryVal = vals.split("|");
$tempTr = $("#tb1 tr:eq(1)");
$tempTr.find("select[name='postID']").val(aryVal[0].split(",")[0]);
$tempTr.find("input[name='fAmount']").val(aryVal[0].split(",")[1]);
for (var i = 1; i < aryVal.length; i++) {
addRow();
$tempTr = $("#tb1 tr:eq(" + (i+1) + ")");
$tempTr.find("select").val(aryVal[i].split(",")[0]);
$tempTr.find("input").val(aryVal[i].split(",")[1]);
}
}
});
2.新增 一行
function addRow() {
$("#tb1 tr:eq(1)").clone(true) //克隆
.find("select option:eq(0)").attr('selected', 'selected').end() //選擇默認
.find("input").val('').end() //設置文本框內容為空
.find("img").remove().end() //清楚 img 圖片
.find("select").after(" <img src='../../Images/No.png' width='10' style='cursor:pointer;' height='10' οnclick='delRow(this);' />").end() //插入 img 圖片
.appendTo($("#tb1")); //新增 tr 到表格
}
3.删除一行
function delRow(obj) {
var tr = $(obj).parent().parent(); //得到刪除 Tr
if (confirm("確認刪除?")) {
tr.remove(); //刪除
}
}
总结:Jquery 让复杂的功能变得简单,选择器的功能很强大,可以在项目中节省大量开发时间.