javascript 操作表格

最新推荐文章于 2025-07-18 11:48:46 发布

原创最新推荐文章于 2025-07-18 11:48:46 发布 · 528 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #button #input #function #div #border

JavaScript 同时被 2 个专栏收录

136 篇文章

订阅专栏

CSS

31 篇文章

订阅专栏

本文介绍了一段使用JavaScript实现的表格操作示例，包括插入、删除和修改表格行的功能，展示了如何通过事件监听来动态操作表格数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<html>
<title>Form Object example</title>
<head>
    <script language="javascript">
        function delrow1() {
            var oElement = event.srcElement;
            while (oElement.tagName != "TR") {
                oElement = oElement.parentElement;
            }
            var oTBody = oElement.parentElement;
            oTBody.removeChild(oElement)
        }

        function delrow2()//刪除当前行
        {
            var currRowIndex = event.srcElement.parentNode.parentNode.rowIndex;
            document.all.yltable.deleteRow(currRowIndex); //table10--表格id
        }
        function insertrow1() //增加的一行方法1
        {
            var newnode = document.getElementById('yltable').lastChild.cloneNode(true);
            document.getElementById('yltable').appendChild(newnode);
        }

        function insertrow2() //增加的一行方法2
        {
            newRow = document.all.yltable.insertRow(-1);
            var j_1 = document.all.yltable.rows.length;
            newcell = newRow.insertCell();
            newRow.bgColor = '#FFFFFF';
            newcell.align = 'center';
            newcell.innerHTML = "" + j_1 + "";

newcell = newRow.insertCell();
newRow.bgColor = '#FFFFFF';

newcell.align = 'center';
newcell.innerHTML = "<input type='text' name='ylText" + j_1 + "' />";

newcell = newRow.insertCell();
newRow.bgColor = '#FFFFFF';

newcell.align = 'center';

newcell.innerHTML = '<input name="button3" type="button" onClick="delrow1()" value="删除1"> <input name="button3" type="button" onClick="delrow2()" value="删除2">';

document.all.yltable.focus();

}

        function inserttable() {
            var newnode = document.getElementById('yltable').cloneNode(true);
            document.getElementById('ylform').appendChild(newnode);
        }
    </script>
</head>
<body>
    <form name="ylform" id="ylform">
    <center>
        <input name="button" type="button" onclick="inserttable()" value="增加表格">
         
        <input name="button2" type="button" onclick="insertrow1()" value="增加一行1">
         
        <input name="button22" type="button" onclick="insertrow2()" value="增加一行2">
    </center>
    <table border="1" align="center" width="50%" id="yltable">
        <tbody id="yl1">
            <tr>
                <td width="30%" height="22">
                    <div align="center">
                        1</div>
                </td>
                <td width="40%">
                    <div align="center">
                        <input name="textfield" type="text" value="yl">
                    </div>
                </td>
                <td width="30%">
                    <div align="center">
                        <input name="button3" type="button" onclick="delrow1()" value="删除1"> <input
                            name="button3" type="button" onclick="delrow2()" value="删除2">
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody id="yl2">
            <tr>
                <td>
                    <div align="center">
                        2</div>
                </td>
                <td>
                    <div align="center">
                        <input name="textfield2" type="text" value="yanleigis">
                    </div>
                </td>
                <td>
                    <div align="center">
                        <input name="button3" type="button" onclick="delrow1()" value="删除1"> <input
                            name="button3" type="button" onclick="delrow2()" value="删除2">
                    </div>
                </td>
            </tr>
        </tbody>
        <tbody id="yl3">
            <tr>
                <td>
                    <div align="center">
                        3</div>
                </td>
                <td>
                    <div align="center">
                        <input name="textfield22" type="text" value="ccc@126.com">
                    </div>
                </td>
                <td>
                    <div align="center">
                        <input name="button3" type="button" onclick="delrow1()" value="删除1"> <input
                            name="button3" type="button" onclick="delrow2()" value="删除2">
                    </div>
                </td>
            </tr>
        </tbody>
    </table>
    <center>
    </center>
    </form>
</body>
</html>