部门管理与操作-优快云博客

本文链接：https://blog.youkuaiyun.com/xueyong4712816/article/details/6521851

//SystemManger.js

Code:

//获取当前控件所在的行
function getParent(src, tagName) {
var par = src.parentElement;
while (par.tagName.toLowerCase() != tagName) {
par = par.parentElement;
}
return par;
}
//添加行
function AddNewRow(src) {
var table = getParent(src, "table")
var lastRow = table.rows[table.rows.length - 2];
var newRow = table.insertRow(table.rows.length - 2);
var cellsLength = lastRow.cells.length;
var sIndex = 0;
while (sIndex < cellsLength) {
var newCell = newRow.insertCell();
newCell.innerHTML = lastRow.cells[sIndex].innerHTML;
if (sIndex == 0) {
newCell.innerText = newRow.rowIndex;
}
sIndex++;
}
newRow.isNew = true;
setRowOperEnable(newRow, false);
}
//编辑行
function SetEditModel(src, isEdit, isCancel) {
var row = getParent(src, "tr");
var cellsLength = row.cells.length;
var startLength = 1;
while (startLength < cellsLength - 1) {
var cell = row.cells[startLength];
if (isEdit) {
cell.children[0].style.display = "none";
cell.children[1].style.removeAttribute("display");
if (cell.children[1].tagName.toLowerCase() != "select") {
cell.children[1].value = cell.children[0].innerHTML;
}
else {
var ops = cell.children[1].options;
for (var i = 0; i < ops.length; i++) {
var tempValue = ops[i].value;
if (tempValue == cell.children[0].innerHTML) {
ops[i].selected = true;
}
}
}
}
else {
cell.children[1].style.display = "none";
cell.children[0].style.removeAttribute("display");
if (!isCancel) {
cell.children[0].innerHTML = cell.children[1].value;
}
}
startLength++;
}
var operCell = row.cells[cellsLength - 1];
var srcText = src.innerText;
var aLength = operCell.children.length;
var astart = 0;
if (row.isNew && srcText == "取消") {
var table = getParent(src, "table");
table.deleteRow(row.rowIndex);
setRowOperEnable(table.rows[0], true);
return;
}
if (row.isNew && srcText == "更新") {
row.isNew = false;
}
if (srcText == "修改") {
setRowOperEnable(row, false);
}
if (srcText == "更新" || srcText == "取消") {
setRowOperEnable(row, true);
}
while (astart < aLength) {
var child = operCell.children[astart];
var childText = child.innerText;
if (srcText == "修改") {
if (childText == "修改" || childText == "删除") {
child.style.display = "none";
}
else {
child.style.removeAttribute("display");
}
}
if (srcText == "更新" || srcText == "取消") {
if (childText == "更新" || childText == "取消") {
child.style.display = "none";
}
else {
child.style.removeAttribute("display");
}
}
astart++;
}
}
//删除行
function deleteRow(src) {
if (confirm('确认删除?')) {
var row = getParent(src, "tr");
var table = getParent(src, "table");
table.deleteRow(row.rowIndex);
setRowIndex(table);
return true;
}
else {
return false;
}
}
//设置行号
function setRowIndex(table) {
var rows = table.rows;
var sIndex = 1;
var end = table.rows.length - 2;
while (sIndex < end) {
table.rows[sIndex].cells[0].innerText = sIndex.toString();
sIndex++;
}
}
function setRowOperEnable(row, enable) {
var table = getParent(row, "table");
var rowLength = table.rows.length;
var cellLength = table.rows[0].cells.length;
if (enable) {
table.rows[rowLength - 1].cells[1].removeAttribute("disabled");
}
else {
table.rows[rowLength - 1].cells[1].setAttribute("disabled", "disabled");
}
var sIndex = 1;
var end = rowLength - 2;
while (sIndex < end) {
if (sIndex != row.rowIndex) {
if (enable) {
table.rows[sIndex].cells[cellLength - 1].removeAttribute("disabled");
}
else {
table.rows[sIndex].cells[cellLength - 1].setAttribute("disabled", "disabled");
}
}
sIndex++;
}
}

//test.htm

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>部门</title>
<script type="text/javascript" src="SystemManage.js"></script>
</head>
<body>
<div id="WapperDiv" style="float: left; background-color: White;">
<table id="LayoutTable" cellpadding="0px" cellspacing="0px" style="width: auto; height: auto;">
<tr id="TopTr">
</tr>
<tr id="CenterTr">
<td >
</td>
<td >
<div class="DocumentTitleDiv">
<label id="DocumentTitleLabel">
部门</label>
</div>
<div align="center">
<table>
<tr>
<td>
<label>
部门名称</label>
<input id="DepartmentName" type="text" class="SearchTextBox" />
</td>
<td>
</td>
<td>
<input id="SearchButton" type="button" value="查询" class="button" />
</td>
<td>
</td>
</tr>
</table>
<table id="departmenttable" border ="1" cellspacing="0px" cellpadding="0px"
rules="none">
<thead>
<tr >
<th style="width: 33px;">
序号
</th>
<th style="width: 81px;">
部门名称
</th>
<th style="width: 81px;">
电话
</th>
<th style="width: 81px;">
联系人
</th>
<th style="width: 97px;">
操作
</th>
</tr>
</thead>
<tr>
<td>
1
</td>
<td>
<label>
物资供应科</label>
<input type="text" style="display: none" />
</td>
<td>
<label>
</label>
<input type="text" style="display: none" />
</td>
<td>
<label>
</label>
<input type="text" style="display: none" />
</td>
<td>
<a href="javascript:void(0);" onclick="SetEditModel(this,1)">修改</a> <a href="javascript:void(0);" onclick="return deleteRow(this);">
删除</a> <a href="javascript:void(0);" style="display: none;" onclick="SetEditModel(this,0)">
更新</a> <a href="javascript:void(0);" style="display: none;" onclick="SetEditModel(this,0,1)">
取消</a>
</td>
</tr>
<tr style="display: none;">
<td>
</td>
<td>
<label style="display: none">
</label>
<input type="text" />
</td>
<td>
<label style="display: none">
</label>
<input type="text" />
</td>
<td>
<label style="display: none">
</label>
<input type="text" />
</td>
<td>
<a href="javascript:void(0);" style="display: none;" onclick="SetEditModel(this,1)">
修改</a> <a href="javascript:void(0);" style="display: none;" onclick="return deleteRow(this);">删除</a> <a href="javascript:void(0);"
onclick="SetEditModel(this,0)">更新</a> <a href="javascript:void(0);" onclick="SetEditModel(this,0,1)">
取消</a>
</td>
</tr>
<tfoot>
<tr>
<td colspan="4" align="right" style="border-right: none;">
</td>
<td style="border-left: none;">
<a href="javascript:void(0);" onclick="AddNewRow(this)">添加</a>
</td>
</tr>
</tfoot>
</table>
</div>
</td>
<td class="td3">
</td>
</tr>
<tr id="BottomTr">
</tr>
<tr>
</tr>
</table>
</div>
</body>
</html>

JS 更新删除一行