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>

posted on 2011-08-22 18:46  archie2010  阅读(1139)  评论(0)  编辑  收藏  举报