JS插入行,删除行 博客分类： 日常累计 jQueryJavaScriptAjaxHTML
程序员文章站
2024-03-21 21:04:22
...
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="./script/jquery-1.5.min.js"></script>
<script type="text/javascript">
var mainTable = "PowerTable";
$(document).ready(function () {
checkboxState();
delButtonState();
delButtonState();
$("#addRow").click(function () {
var randString = getRand();
var htmlText = "<tr id='" + randString + "'>";
htmlText += "<td width='10'><input class='checkbox' type='checkbox' alt='" + randString + "'/></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "<td><input type='text' size='100' style='width:50%;'></td>";
htmlText += "</tr>";
$("#" + mainTable).append(htmlText);
checkboxState();
});
$("#delRow").click(function () {
$(".checkbox").each(function () {
var findT = $(this).attr("alt").substr(0, 1);
if ($(this).attr("checked")) {
if (findT == "T") {
$("#" + $(this).attr("alt")).remove();
} else {
alert("ajax");
}
$("#checkbox").attr("checked", false);
}
});
checkboxState();
delButtonState();
});
$("tr td").live("keydown", function () {
});
$("#checkbox").click(function () {
checkboxState();
$(".checkbox").attr("checked", $(this).attr("checked"));
delButtonState();
});
$(".checkbox").live("click", function () {
if ($(this).attr("checked")) {
$("#delRow").attr("disabled", false);
} else {
delButtonState();
}
});
});
function delButtonState() {
$("#delRow").attr("disabled", true);
var checkboxArr = $(".checkbox");
for (var i = 0; i < checkboxArr.length; i++) {
if ($(checkboxArr[i]).attr("checked")) {
$("#delRow").attr("disabled", false);
break;
}
}
}
function checkboxState() {
if ($(".checkbox").length > 0) {
$("#checkbox").attr("disabled", false);
} else {
$("#checkbox").attr("disabled", true);
$("#checkbox").attr("checked", false);
}
}
function getRand() {
var randString = "T";
var dateRand = new Date();
randString += dateRand.getFullYear();
randString += dateRand.getMonth() + 1;
randString += dateRand.getDate();
randString += dateRand.getHours();
randString += dateRand.getMinutes();
randString += dateRand.getSeconds();
randString += dateRand.getMilliseconds();
return randString;
}
</script>
</head>
<body>
<table width="100%" border="1" cellSpacing="0" cellPadding="2" id="PowerTable">
<tr align="middle" bgColor="#ffcc00">
<th width=10>
<input id="checkbox" type="checkbox"/>
</th>
<th>
票证名称
</th>
<th>
领取数量
</th>
<th>
字轨
</th>
<th>
起始号码
</th>
<th>
终止号码
</th>
<th>
备注
</th>
</tr>
<tr id="201131516146490">
<td width="10"><input class="checkbox" alt="201131516146490" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516147235">
<td width="10"><input class="checkbox" alt="201131516147235" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516147863">
<td width="10"><input class="checkbox" alt="201131516147863" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
<tr id="201131516148516">
<td width="10"><input class="checkbox" alt="201131516148516" type="checkbox"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
<td><input size="100" style="width: 50%;" type="text"></td>
</tr>
</table>
<input type="button" value="新增行" id="addRow">
<input type="button" value="删除行" id="delRow">
</body>
</html>