动态增加、删除列

最新推荐文章于 2024-04-25 11:27:44 发布

原创最新推荐文章于 2024-04-25 11:27:44 发布 · 824 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#input #function #javascript #html #button #border

ajax 专栏收录该内容

2 篇文章

订阅专栏

本文提供了一个使用JavaScript操作HTML表格的实例，演示如何通过脚本动态地为表格增加和删除单元格。该示例利用了getElementById、getElementsByTagName等DOM方法，并通过插入和移除元素节点实现了对表格结构的灵活调整。

废话不多，上代码

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title></title>

        <script type="text/javascript" src="js/common.js"></script>

        <script language="javascript">

            function addrows(index){

                var trArray = document.getElementsByTagName("tr");

                var count = 0;

                for(var i = 0 ; i < trArray.length ; i++) {

                    var trrows = document.getElementsByTagName("tr")[i];

                    //alert(index);

                    var tdcols = trrows.insertCell(index);

                    if(count == i ) {

                        tdcols.innerHTML ='the'+(i+1)+'cols';

                    }

                    count++;

                }

            }

            

            function delrows() {

                var tdArray = document.getElementsByName("add");

				while(tdArray.length!=0)

				{

					for(var i = 0 ; i < tdArray.length ; i++) {

	                    var td = tdArray[i];

	                    td.parentNode.removeChild(td);

						tdArray = document.getElementsByName("add");

                	}

				}

            }

        </script>

    </head>

    <body>

        <input type="checkbox" name="addrow1" onclick="addrows(0,'td0')"/>

        <input type="checkbox" name="addrow1" onclick="addrows(2,'td2')"/>

        <input type="checkbox" name="addrow1" onclick="addrows(3,'td3')"/>

        <input type="button" value="delete" onclick="delrows()">

        <table border="1">

            <tr name="one">

                <td id="add">tr2/td4</td>

                <td>hello</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

            <tr name="two">

                <td id="add">tr3/td4</td>

                <td>hello2</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

			<tr name="one">

                <td id="add">tr2/td4</td>

                <td>hello</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

            <tr name="three">

                <td id="add">tr3/td4</td>

                <td>hello2</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

			<tr name="four">

                <td id="add">tr2/td4</td>

                <td>hello</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

            <tr name="five">

                <td id="add">tr3/td4</td>

                <td>hello2</td>

				<td>hello</td>

				<td>hello</td>

            </tr>

        </table>

    </body>

</html>