利用javascript动态添加表格行以及删除表格行

最新推荐文章于 2023-11-30 09:18:07 发布

你好龙卷风！！！

最新推荐文章于 2023-11-30 09:18:07 发布

阅读量1.8k

点赞数

分类专栏：前台javaScript，jquery

前台javaScript，jquery 专栏收录该内容

72 篇文章 1 订阅

订阅专栏

转：https://blog.csdn.net/summerhmy/article/details/82892271

1，首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。

如图：

对应的html代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>

<script src="js/editTable.js" language="javascript"></script>
</head>

<body>
   <input type="button" value="新增" οnclick="createRow()">
   <input type="button" value="删除" οnclick="delRow()">

   <table id="editTable" border="1" width="800">
       <tr>
           <th>选择</th>
           <th>姓名</th>
           <th>性别</th>
           <th>电话</th>
       </tr>
       <tbody id="tbody">

       </tbody>
   </table>
</body>
</html>

2，然后我们编写javascript脚本完成动态增加行的操作：

function createRow(){
   var editTable=document.getElementById("tbody");
   var tr=document.createElement("tr");
   var td0=document.createElement("td");
   var checkbox=document.createElement("input");
   checkbox.type="checkbox";
   checkbox.name="checkRow";
   td0.appendChild(checkbox);
   var td1=document.createElement("td");
   td1.innerHTML="<input type='text' />";
   var td2=document.createElement("td");
   td2.innerHTML="a2";
   var td3=document.createElement("td");
   td3.innerHTML="a3";
   tr.appendChild(td0);
   tr.appendChild(td1);
   tr.appendChild(td2);
   tr.appendChild(td3);
   editTable.appendChild(tr);
}

创建tr和td元素，增加行。

效果：
---------------------

3，

再编写删除按钮的javascript脚本

你好龙卷风！！！

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
利用javascript动态添加表格行以及删除表格行

转：https://blog.csdn.net/summerhmy/article/details/828922711，首先先简单创建一个只有一行表格还有一个新增按钮、一个删除按钮。如图：对应的html代码：<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/...
复制链接

扫一扫