ホームページ > 記事 > ウェブフロントエンド > JS+JQueryを使ってテーブルの行を動的に操作する方法を詳しく解説
JS+JQueryを使ってテーブルの行を動的に操作する方法を詳しく解説
- php中世界最好的语言オリジナル
- 2018-04-25 09:53:052338ブラウズ
今回はJS+JQueryでテーブルの行を動的に操作する方法について詳しく解説していきます。 JS+JQueryでテーブルの行を動的に操作する際の注意点を実際に見てみましょう。
次の HTML コードの機能: フォームを送信し、チェックボックス の値を送信します (チェックボックスの値は次のテキスト ボックスと等しく、チェックボックスとテキスト ボックスは同じ行にあり、追加することができます)動的に削除されます）。
オリジナルの JS バージョン:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>javascript添加行demo</title>
<script type="text/javascript">
/**验证表单复选框是否有选择*/
function isValidChkSelect(frm){
var chk = frm.chked;
if(chk == undefined){
return;
}
var len = frm.chked.length;
if(chk.length == undefined){
// 只有一个checkbox
if (chk.checked == true) {
return true;
}
} else {
for(var i = 0; i < chk.length; i++) {
if (chk[i].checked == true) {
return true;
}
}
}
return false;
}
/**选择所有文本框*/
function selectAll(frm){
for (var i = 0; i < frm.elements.length; i++){
var e = frm.elements[i];
if (e.name != 'chkall' && e.type == 'checkbox')
e.checked = frm.chkall.checked;
}
}
/**添加新行*/
function addNew(){
var objMyTable = document.getElementById("tbl");
var index = objMyTable.rows.length - 1;
var nextRow = objMyTable.insertRow(index);// 插入新行
var objCel_0 = nextRow.insertCell(0);// 添加单元格
objCel_0.innerHTML = "<input type='checkbox' name='chked' value='' />";
var objCel_1 = nextRow.insertCell(1);
// nextRow.rowIndex -- 行索引
objCel_1.innerHTML = "<input type='text' name='newRow"+nextRow.rowIndex+"' /> <a href='#' onclick='delRow(this)'>删除</a>";
}
/**删除行对象*/
function delRow(obj){
//obj.parentNode.parentNode.removeNode(true); // Firefox不兼容
var new_tr = obj.parentNode.parentNode;
var tmp = new_tr.parentNode;
tmp.removeChild(new_tr); // 删除子节点
}
/**将文本框值赋给同一行对应的复选框*/
function setValue(obj, obj_chk){
obj_chk.value = obj.value;
}
function doSubmit(frm){
if(isValidChkSelect(frm) == false){
alert("选择不能少于一项");
return false;
}
for(var i = 0; i < document.getElementsByTagName("input").length; i++) {
var obj = document.getElementsByTagName("input")[i];
if(obj.type == "text" && obj.name.substring(0, 6) == "newRow"){
var obj_chk = obj.parentNode.parentNode.childNodes[0].childNodes[0];// 复选框对象
if(valid(obj, obj_chk)){
setValue(obj, obj_chk);// 同一行的文本框值 赋值给 复选框
continue;
} else {
return false;
}
}
}
return true;
}
function valid(obj, obj_chk){
if(obj_chk.checked){
var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(obj.value == ""){
alert("添加的地址不能为空！");
return false;
}
if(!patrn.test(obj.value)){
alert("请输入正确的邮件地址！");
return false;
}
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return doSubmit(this)">
<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
<tr>
<td><input type="checkbox" name='chkall' onclick="selectAll(this.form)"/>全部选择</td>
<td>
允许发送地址
<a href="#" onclick="addNew()">添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chked" value="mailfrom@gmail.com">
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr>
<td colspan="2">
<input type="submit" value="提交" name="B1">
</td>
</tr>
</table>
</form>
</body>
</html>
JQuery バージョン:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery添加行demo</title>
<script type="text/javascript" src="jquery-1.6.4.min.js"></script>
<script type="text/javascript">
$("document").ready(function(){
// 全部选择的点击事件
$("input[name='chkall']").click(function(){
$("input[name='chked']").attr("checked", this.checked);
});
});
var row_cur_index = 0;// 插入行的当前索引
/**添加新行*/
function addNew(){
var row_id = "tr" + row_cur_index;// 所插入行的id
var row_obj = "<tr id='"+row_id+"'><td><input type='checkbox' class='ck_class' name='chked' value='' /></td><td><input type='text' name='newRow"+row_cur_index+"' /> <a href='#' onclick='delRow("+row_id+")'>删除</a></td></tr>";
$("#topRow").before(row_obj); // 插入行
row_cur_index = row_cur_index + 1;
}
/**将文本框值赋给同一行对应的复选框*/
function setValue(row_index, value){
var row_id = "#tr" + row_index;
$(row_id).find(":checked").val(value);
}
/**删除行对象*/
function delRow(row_id){
$(row_id).remove(); // 删除匹配row_id的元素
}
function doSubmit(frm){
/**判断复选框是否有选*/
if($("input[name='chked']:checked").size() == 0){
alert("选择不能少于一项");
return false;
}
try {
$("tr[id^='tr']").each(function(){
var tmp_row_index = this.id.substring(2); // 当前行索引
if($("#tr"+tmp_row_index).find(":checkbox").attr("checked")){
var patrn = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
var input_value = $("input[name='newRow"+tmp_row_index+"']").val(); // 文本框值
setValue(tmp_row_index, this.value);
if(input_value == "") throw "Err1";
if (!patrn.test(input_value)) throw "Err2";
}
});
} catch (e) {
if(e == "Err1")
alert("添加的地址不能为空！");
if(e == "Err2")
alert("请输入正确的邮件地址！");
return false;
}
return true;
}
</script>
</head>
<body>
<form method="post" action="" onsubmit="return doSubmit(this)">
<table id="tbl" border="1" cellpadding="4" style="border-collapse: collapse" width="100%">
<tr>
<td><input type="checkbox" name='chkall' />全部选择</td>
<td>
允许发送地址
<a href="#" onclick="addNew()">添加新地址</a>
</td>
</tr>
<tr>
<td>
<input type="checkbox" name="chked" value="mailfrom@gmail.com">
</td>
<td>mailfrom@gmail.com</td>
</tr>
<tr id="topRow">
<td colspan="2">
<input type="submit" value="提交" name="B1">
</td>
</tr>
</table>
</form>
</body>
</html>
この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い内容については、PHP 中国語 Web サイトの他の関連記事に注目してください。
推奨書籍:
jQuery テーブル プラグイン データテーブルの使用方法の詳細な説明
以上がJS+JQueryを使ってテーブルの行を動的に操作する方法を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。