通過jQuery實作串列的資料動態添加與洗掉
代碼演示
演示地址
背景隔行換色
CSS代碼
/* 設定奇數行顏色 */
.even {
background-color: dodgerblue;
}
/* 設定偶數行背景顏色 */
.odd {
background-color: pink;
}
JavaScript代碼
// 設定奇數偶數行的背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
全選和取消全選事件
//設定全選和取消全選事件
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
if ($(this).prop("checked")) {
$("tbody input:checkbox").prop("checked", true);
$("#show").replaceWith("<span id='show'>已全選</span>");
} else {
$("tbody input:checkbox").prop("checked", false);
$("#show").replaceWith("<span id='show'>已取消全選</span>");
}
});
洗掉
//給當前和未來元素添加系結事件
$("tbody").on("click", "td>a:nth-child(2)", function () {
if (confirm("確定要洗掉嗎?")) {
//取消背景顏色
$("tr:even").removeClass("even");
$("tr:odd").removeClass("odd");
//移除tr
$(this).parent().parent().remove()
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
}
});
新增
HTML代碼
<!--新增串列-->
<div>
<form>
<table>
<tr>
<td>序號</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>分類名</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text"/></td>
</tr>
<input type="reset" value="確定"/>
<input type="reset" value="取消"/>
</table>
</form>
</div>
CSS代碼
/*默認隱藏新增頁面*/
div:nth-child(2) {
display: none;
}
JavaScript代碼
// 點擊"新增"按鈕顯示新增串列
$("div:nth-child(1)>input:button").click(function () {
$("div:nth-child(2)").show("slow");
});
//點擊"取消"按鈕隱藏div
$("div:nth-child(2) :reset:last").click(function () {
$("div:nth-child(2)").hide("slow");
});
//點擊"確定"按鈕,提交表單
$("div:nth-child(2) :reset:first-child").click(function () {
$("div:nth-child(1) tbody").append(" <tr>\n" +
" <td><input type=\"checkbox\"/></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">洗掉</a></td>\n" +
" </tr>");
// 獲取文本框節點
var textDom = $("div:nth-child(2) :text");
// 獲取td節點
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//獲取文本框內容
var content = textDom.eq(i).val();
// 把文本框獲取的內容寫入到td內
tdDom.eq(i + 1).text(content);
}
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("div:nth-child(2)").hide("slow");
});
完整代碼
HTML代碼
<body>
<div>
<input type="button" value="新增"/>
<table cellpadding="0px" cellspacing="0px">
<thead>
<tr>
<th><input type="checkbox"/></th>
<th>序號</th>
<th>分類名</th>
<th>分類描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/></td>
<td>1</td>
<td>1</td>
<td>1</td>
<td><a href="#">修改</a> <a href="#">洗掉</a></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>2</td>
<td>2</td>
<td>2</td>
<td><a href="#">修改</a> <a href="#">洗掉</a></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td><a href="#">修改</a> <a href="#">洗掉</a></td>
</tr>
<tr>
<td><input type="checkbox"/></td>
<td>4</td>
<td>4</td>
<td>4</td>
<td><a href="#">修改</a> <a href="#">洗掉</a></td>
</tr>
</tbody>
</table>
</div>
<!--新增串列-->
<div>
<form>
<table>
<tr>
<td>序號</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>分類名</td>
<td><input type="text"/></td>
</tr>
<tr>
<td>分類描述</td>
<td><input type="text"/></td>
</tr>
<input type="reset" value="確定"/>
<input type="reset" value="取消"/>
</table>
</form>
</div>
</body>
CSS代碼
table, th, td {
border: 1px solid black;
}
th, td {
width: 120px;
height: 40px;
line-height: 40px;
text-align: center;
}
/* 設定奇數行顏色 */
.even {
background-color: dodgerblue;
}
/* 設定偶數行背景顏色 */
.odd {
background-color: pink;
}
/* 默認隱藏新增頁面*/
div:nth-child(2) {
display: none;
}
JavaScript代碼
<script>
$(function () {
// 設定奇數偶數行的背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
//設定全選和取消全選事件
$("thead th:first").append("<span id='show'></span>")
$("thead input:checkbox").click(function () {
if ($(this).prop("checked")) {
$("tbody input:checkbox").prop("checked", true);
$("#show").replaceWith("<span id='show'>已全選</span>");
} else {
$("tbody input:checkbox").prop("checked", false);
$("#show").replaceWith("<span id='show'>已取消全選</span>");
}
});
//新增商品
$("div:nth-child(1)>input:button").click(function () {
$("div:nth-child(2)").show("slow");
});
//"取消" 按鈕
$("div:nth-child(2) :reset:last").click(function () {
$("div:nth-child(2)").hide("slow");
});
//"確定" 按鈕
$("div:nth-child(2) :reset:first-child").click(function () {
$("div:nth-child(1) tbody").append(" <tr>\n" +
" <td><input type=\"checkbox\"/></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td></td>\n" +
" <td><a href=\"#\">修改</a> <a href=\"#\">洗掉</a></td>\n" +
" </tr>");
// 獲取文本框節點
var textDom = $("div:nth-child(2) :text");
// 獲取td節點
var tdDom = $("div:nth-child(1) tr:last td");
for (var i = 0; i < textDom.length; i++) {
//獲取文本框內容
var content = textDom.eq(i).val();
// 把文本框獲取的內容寫入到td內
tdDom.eq(i + 1).text(content);
}
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
$("div:nth-child(2)").hide("slow");
});
//給當前和未來元素添加系結事件
$("tbody").on("click", "td>a:nth-child(2)", function () {
if (confirm("確定要洗掉嗎?")) {
//取消背景顏色
$("tr:even").removeClass("even");
$("tr:odd").removeClass("odd");
//移除tr
$(this).parent().parent().remove()
//添加背景顏色
$("tr:even").addClass("even");
$("tr:odd").addClass("odd");
}
});
});
</script>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204876.html
標籤：其他
上一篇：2020/11/06學習日志