js动态表格
Html代码：
<html>
<title>
动态表格
</title>
<head>
</head>
<body>
<form method="post" name="subType" action="flowtype_sub_insert.jsp">
<input type="hidden" name="mainTypeID" value=""/>
<p>
动态表格：<input type="text" name="subFlowTypeName" value="表格" onclick="this.select()"/>
</p>
<table border="0" id="subTypeField" cellspacing="0" cellpadding="2">
<tr bgcolor="#E5EAF1" height="24">
<th>序号</th>
<th>字段名称</th>
<th>数据类型</th>
<th>操作</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="fieldName"></td>
<td>
<select name="fieldType" style="width:78px;">
<option value="dtString">字符串</option>
<option value="dtInteger">数据类型</option>
<option value="dtDateTime">日期类型</option>
</select>
</td>
<td>
<a href="javascript:" onclick="moveUp(this)">上移 </a>
<a href="javascript:" onclick="moveDown(this)">下移 </a>
<a href="javascript:" onclick="removeRow(this)">删除行 </a>
<a href="javascript:" onclick="addRow(this)">插入行</a>
</td>
</tr>
</table>
<p>
<input type="submit" value="保存"/> <input type="button" value="取消" onclick="location='flowtype_display.jsp?idvalue='"/>
</p>
</form>
</body>
</html>
<script type="text/javascript">
var stf = document.getElementById("subTypeField");
function getIndex(e) {
if(!e) return 0;
return parseInt(e.parentNode.parentNode.cells[0].innerHTML);
}
function addRow(e) {
//得到其在表格中的当前行号
index = getIndex(e);
//添加行,objTable.insertRow(objTable.rows.length).
//就是为表格objTable在最后新增一行
var nr = stf.insertRow(index+1);
for(var i=0; i<stf.rows[1].cells.length; i++ ) {
//tr的cells==>td
nr.insertCell().innerHTML = stf.rows[index].cells[i].innerHTML;
}
sortNumber();
}
function sortNumber() {
for(var j=1; j<stf.rows.length;j++) {
stf.rows[j].cells[0].innerHTML = j;
}
}
function removeRow(e) {
if(stf.rows.length == 2) {
alert("不能删除，必须保留一行");
return;
}
index = getIndex(e);
if(confirm("确定删除第" + index + "行吗?")) {
stf.deleteRow(index);
sortNumber();
}
}
function moveUp(e) {
index = getIndex(e);
if(index == 1) {
alert("已经是最上一行，不能再往上移");
return;
}
changeValue(index, index - 1);
}
function moveDown(e) {
index = getIndex(e);
if(index == stf.rows.length - 1) {
alert("已经是最后一行,不能再往下移");
return;
}
changeValue(index, index + 1);
}
function changeValue(fromIndex, toIndex) {
for(var i=1; i<stf.rows[1].cells.length; i++ ) {
var tempHTML = stf.rows[fromIndex].cells[i].innerHTML;
stf.rows[fromIndex].cells[i].innerHTML = stf.rows[toIndex].cells[i].innerHTML;
stf.rows[toIndex].cells[i].innerHTML = tempHTML;
}
}
</script>
作者: archie2010 发表于 2011-08-22 18:46 原文链接
关键字 js动态表格
推荐.NET配套的通用数据层ORM框架：CYQ.Data 通用数据层框架
"