jquery 对 table 的操作

Posted 2020-10-24 Debugs

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery 对 table 的操作相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<script src="Scripts/jquery-1.8.2.min.js"></script>
<script src="Scripts/json2.js"></script>
<script>

$(function () {
$("a[name=addRow]").click(function () {
$("#myTable tr:last").after(‘ <tr><td>Row4</td></tr>‘);
return false;
})
})

$(document).ready(function () {
//隐藏模板tr
$("#tb tr").eq(2).hide();
var i = 0;
$("#BtAdd").click(function () {
//复制一行
var tr = $("#tb tr").eq(2).clone();
tr.find("td").get(0).innerHTML = ++i;
tr.show();
tr.appendTo("#tb");
});
$("#BtDel").click(function () {
$("#tb tr:gt(2)").each(function () {
if ($(this).find("#CK").get(0).checked == true) {
$(this).remove();
}
});
i = 0;
$("#tb tr:gt(2)").each(function () {
$(this).find("td").get(0).innerHTML = ++i;
});
$("#CKA").attr("checked", false);
});
$("#CKA").click(function () {
$("#tb tr:gt(2)").each(function () {
$(this).find("#CK").get(0).checked = $("#CKA").get(0).checked;
});
});
})

$(function () {
$("#btnAdd").click(HandleUDFProperty);
function HandleUDFProperty() {
if ($("[tag=‘udfKey‘]").size() < 5) {
$("#udf_template").clone().find(":text").val("").end().find("a").click(function () {
$(this).parents(‘p‘).remove();
}).end().appendTo($("#UDFBlock"));
}
};

// 获取属性值
$("#btnGetValue").on("click", function () {
var keys = $("[tag=‘udfKey‘]"),
values = $("[tag=‘udfValue‘]"),
len = keys.length,
result = [],
txt = "";

for (var i = 0; i < len; i++) {
txt += "{key:" + keys.eq(i).val() + ", value:" + values.eq(i).val() + "},";
}

$("#result").text(txt);
});
})
</script>
</head>
<body>

</div>
</div>
</form>

<div id="UDFBlock">
<p id="udf_template">
<input id="CK" type="checkbox" name="CK" />
<input type="text" value="" tag="udfKey">
<input type="text" value="" tag="udfValue">
<a class="UDF_Delete" style="cursor:pointer">Delete</a>
</p>
</div>
<input type="button" id="btnAdd" value=‘Add‘ />
<input type="button" id="btnGetValue" value="Get Value" />
<div id="result">

</div>
</body>
</html>

以上是关于jquery 对 table 的操作的主要内容，如果未能解决你的问题，请参考以下文章

Jquery Table 的基本操作

JQuery 对带有checkbox的table操作遍历选中的行的某一列的数据

请教jquery 对表格的行操作的。对页面表格进行上下移动位置，删除记录的操作。谢谢。如下补充

jQuery操作table表格