最近學了JS和JQuery，并且寫出了串列的動態增加和洗掉還有修改的操作，現在我就來分享給大家
演示地址
點擊的時候頁面可能沒效果,如果出現不能點擊的話退出重進,再點一下下面的鏈接就好了，
點擊這里查看頁面效果
JS/JQuery代碼
tr顏色
// 顏色
$(".list tr:odd").addClass("odd");
全選/取消全選事件
// 多選框的點擊操作
// 默認樣式
$(".list th:first").append("<label for='check' id='show'>全選</label>");
$("#check").click(function() {
if(this.checked) {
$("#show").replaceWith("<label for='check' id='show'>已全選</label>");
$("tbody :checkbox").prop("checked", true);
} else {
$("tbody :checkbox").prop("checked", false);
$("#show").replaceWith("<label for='check' id='show'>已取消全選</label>");
}
});
串列HTML代碼
<div class="list">
<form>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="check" name="check" /></th>
<th>分類的ID</th>
<th>分類的名稱</th>
<th>分類的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>第一行</td>
<td>第一行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>第二行</td>
<td>第二行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>第三行</td>
<td>第三行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>第四行</td>
<td>第四行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>第五行</td>
<td>第五行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
新增JQuery代碼
// 點擊新增時顯示新增串列
$("input:button:first").click(function() {
$("#addBox").slideDown(1000);
});
// 點取消新增時隱藏新增串列
$("#addBox input:reset:last-child").click(function() {
$("#addBox").slideUp(1000);
});
// 增加 點擊事件
$("#addBox input:reset:first-child").click(function() {
$(".list tr:odd").removeClass("odd"); // 新增前去除顏色
// 先復制一份tbody下的tr
var trDom = $(".list tbody tr:first").clone(true);
$(".list tbody").append(trDom); // 寫入到tbody內
// 將輸入的內容寫入到串列
var textDom = $("#addBox input:text"); // 獲取文本框
var tdDom = $(".list tbody tr:last td");
for(var i = 0; i < textDom.length; i++) {
var content = textDom.eq(i).val();
if(content == ""){
tdDom.parents("tr").remove();// 如果輸入的有空值 洗掉剛才添加的內容
$(".list tr:odd").addClass("odd"); // 添加顏色
alert("請輸入完整");
return;// 提示輸入完整并結束程式
}
tdDom.eq(i + 1).text(content);
}
$(".list tr:odd").addClass("odd"); // 新增后添加顏色
});
新增HTML代碼
<input type="button" value="新增" />
<div id="addBox">
<form>
<table>
<tr>
<th colspan="2">新增串列</th>
</tr>
<tr>
<td>分類的ID:</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>
<tr>
<td colspan="2">
<input type="reset" value="新增一個" />
<input type="reset" value="取消新增" />
</td>
</tr>
</table>
</form>
</div>
洗掉JQuery代碼
// 洗掉操作
$(".list tbody td a:last-child").click(function() {
var isDel = confirm("確定真的要洗掉嗎?");
if(isDel) {
if($(".list tr").length > 2) {
$(".list tr:odd").removeClass("odd"); // 洗掉前去除顏色
$(this).parents("tr").remove();
$(".list tr:odd").addClass("odd"); // 洗掉后添加顏色
} else {
alert("最少保留一條資料");
}
}
});
修改JQuery代碼
// 修改點擊事件
$(".list tbody td a:first-child").click(function() {
// 點擊修改時顯示修改串列
$("#updBox").slideDown(1000);
// 取消事件 --> 取消上一次修改的點擊事件
$("#updBox input:reset:first-child").off("click");
var trDom = $(this).parents("tr");// 修改當前的tr
update(trDom); // 系結修改事件
});
// 點擊取消修改之后也隱藏修改串列
$("#updBox input:reset:last-child").click(function(){
$("#updBox").slideUp(1000);
});
修改呼叫的方法
// 修改操作
function update(trDom) {
$("#updBox input:reset:first-child").click(function() {
// 設定修改點擊時間
var textDom = $("#updBox input:text"); // 獲取文本框
for(var i = 0; i < textDom.length; i++) {
// 將文本框的內容替換到修改的地方-->trDom
var content = textDom.eq(i).val();
if(content == ""){
alert("請輸入完整");
return; // 提示輸入完整并結束程式
}
trDom.find("td").eq(i + 1).text(content);// 修改tr下的td內的內容
}
// 修改完畢之后隱藏修改串列
$("#updBox").slideUp(1000);
});
}
修改HTML代碼
<div id="updBox">
<form>
<table>
<tr>
<th colspan="2">修改串列</th>
</tr>
<tr>
<td>分類的ID:</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>
<tr>
<td colspan="2">
<input type="reset" value="修改一個" />
<input type="reset" value="取消修改" />
</td>
</tr>
</table>
</form>
</div>
整體代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/jquery-3.3.1.js"></script>
<style>
td,
th {
width: 120px;
text-align: center;
}
.odd {
background-color: lightsalmon;
}
#addBox {
display: none;
width: 320px;
float: left;
background-color: lightslategrey;
}
#updBox {
display: none;
width: 320px;
float: left;
background-color: lightslategrey;
}
#addBox table,#updBox table{
margin: 0 auto;
}
#addBox th,#updBox th{
color: red;
}
</style>
<script>
$(function() {
// 顏色
$(".list tr:odd").addClass("odd");
// 多選框的點擊操作
// 默認樣式
$(".list th:first").append("<label for='check' id='show'>全選</label>");
$("#check").click(function() {
if(this.checked) {
$("#show").replaceWith("<label for='check' id='show'>已全選</label>");
$("tbody :checkbox").prop("checked", true);
} else {
$("tbody :checkbox").prop("checked", false);
$("#show").replaceWith("<label for='check' id='show'>已取消全選</label>");
}
});
// 點擊新增時顯示新增串列
$("input:button:first").click(function() {
$("#addBox").slideDown(1000);
});
// 點取消新增時隱藏新增串列
$("#addBox input:reset:last-child").click(function() {
$("#addBox").slideUp(1000);
});
// 增加 點擊事件
$("#addBox input:reset:first-child").click(function() {
$(".list tr:odd").removeClass("odd"); // 新增前去除顏色
// 先復制一份tbody下的tr
var trDom = $(".list tbody tr:first").clone(true);
$(".list tbody").append(trDom); // 寫入到tbody內
// 將輸入的內容寫入到串列
var textDom = $("#addBox input:text"); // 獲取文本框
var tdDom = $(".list tbody tr:last td");
for(var i = 0; i < textDom.length; i++) {
var content = textDom.eq(i).val();
if(content == ""){
tdDom.parents("tr").remove();// 如果輸入的有空值 洗掉剛才添加的內容
$(".list tr:odd").addClass("odd"); // 添加顏色
alert("請輸入完整");
return;// 提示輸入完整并結束程式
}
tdDom.eq(i + 1).text(content);
}
$(".list tr:odd").addClass("odd"); // 新增后添加顏色
});
// 洗掉操作
$(".list tbody td a:last-child").click(function() {
var isDel = confirm("確定真的要洗掉嗎?");
if(isDel) {
if($(".list tr").length > 2) {
$(".list tr:odd").removeClass("odd"); // 洗掉前去除顏色
$(this).parents("tr").remove();
$(".list tr:odd").addClass("odd"); // 洗掉后添加顏色
} else {
alert("最少保留一條資料");
}
}
});
// 修改點擊事件
$(".list tbody td a:first-child").click(function() {
// 點擊修改時顯示修改串列
$("#updBox").slideDown(1000);
// 取消事件 --> 取消上一次修改的點擊事件
$("#updBox input:reset:first-child").off("click");
var trDom = $(this).parents("tr");// 修改當前的tr
update(trDom); // 系結修改事件
});
// 點擊取消修改之后也隱藏修改串列
$("#updBox input:reset:last-child").click(function(){
$("#updBox").slideUp(1000);
});
});
// 修改操作
function update(trDom) {
$("#updBox input:reset:first-child").click(function() {
// 設定修改點擊事件
var textDom = $("#updBox input:text"); // 獲取文本框
for(var i = 0; i < textDom.length; i++) {
// 將文本框的內容替換到修改的地方-->trDom
var content = textDom.eq(i).val();
if(content == ""){
alert("請輸入完整");
return; // 提示輸入完整并結束程式
}
trDom.find("td").eq(i + 1).text(content);// 修改tr下的td內的內容
}
// 修改完畢之后隱藏修改串列
$("#updBox").slideUp(1000);
});
}
</script>
</head>
<body>
<input type="button" value="新增" id="add" />
<div class="list">
<form>
<table border="1" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" id="check" name="check" /></th>
<th>分類的ID</th>
<th>分類的名稱</th>
<th>分類的描述</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" /></td>
<td>1</td>
<td>第一行</td>
<td>第一行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>2</td>
<td>第二行</td>
<td>第二行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>3</td>
<td>第三行</td>
<td>第三行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>4</td>
<td>第四行</td>
<td>第四行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
<tr>
<td><input type="checkbox" /></td>
<td>5</td>
<td>第五行</td>
<td>第五行</td>
<td>
<a href="#">修改</a>
<a href="#">洗掉</a>
</td>
</tr>
</tbody>
</table>
</form>
</div>
<div id="addBox">
<form>
<table>
<tr>
<th colspan="2">新增串列</th>
</tr>
<tr>
<td>分類的ID:</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>
<tr>
<td colspan="2">
<input type="reset" value="新增一個" />
<input type="reset" value="取消新增" />
</td>
</tr>
</table>
</form>
</div>
<div id="updBox">
<form>
<table>
<tr>
<th colspan="2">修改串列</th>
</tr>
<tr>
<td>分類的ID:</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>
<tr>
<td colspan="2">
<input type="reset" value="修改一個" />
<input type="reset" value="取消修改" />
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/204877.html
標籤：其他