js动态创建表格_document.createelement("td")-优快云博客

本文链接：https://blog.youkuaiyun.com/sxy249343051/article/details/5750553

本文介绍了一种使用JavaScript实现HTML表格动态添加和删除行的方法。通过定义特定ID选择器，该方法允许用户轻松地在表格中添加新行并设置删除功能。此外，还提供了如何在新增行中插入下拉列表的示例。

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

<html>
<head></head>
<script type="text/javascript">
var i = 1;
function addRow(id){
    var tbody = document.getElementById(id).getElementsByTagName("TBODY")[0];
    var nid = i;     //定义行编号   用于删除
    var id = 'tr'+nid; //定义行名称用于删除
    var row = document.createElement("TR") //定义行
    row.setAttribute("id",id);       //给行 id属性赋值
    var td1 = document.createElement("TD") //定义列
    td1.setAttribute("className","zit"); //给列增加样式
    td1.align="center";                  //居中
    td1.style.cssText ="border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;"; //添加右和下边框
    td1.innerHTML+=nid;
    var td2 = document.createElement("TD")
    td2.setAttribute("className","zit");
    td2.align="center";
    td2.style.cssText ="border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;";
    td2.innerHTML+="<input   type='text'   name='vcName' size='35'>";
    var td3 = document.createElement("TD")
    td3.setAttribute("className","zit");
    td3.align="center";
    td3.style.cssText ="border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;";
    td3.innerHTML+="<select name='select1'><option>下拉1</option><option>下拉2</option></select>";
    var td5 = document.createElement("TD")
    td5.setAttribute("className","zit");
    td5.align="center";
    td5.style.cssText ="border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;";
    td5.innerHTML+="<input   type='text'   name='score' size='2'>";
    var td7 = document.createElement("TD")
    td7.setAttribute("className","zit");
    td7.align="center";
    td7.style.cssText ="border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;";
    td7.innerHTML+="<a href='javascript:deleRow("+nid+");'>[删除]</a>" //传行编号进入删除js
    row.appendChild(td1);
    row.appendChild(td2);
    row.appendChild(td3);
    row.appendChild(td5);
    row.appendChild(td7);
    tbody.appendChild(row);
    i++;
}
function deleRow(index){
    var mytable = document.getElementById("mytbody");
    var myrow = document.getElementById("tr"+index);
    mytable.deleteRow(myrow.rowIndex);
}
</script>
<body>
<table width="100%" border="0" cellspacing="0" id="mytable">
      <tbody id="mytbody">
        <tr>
          <td height="20" colspan="7" class="zit" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'>
          <input type="button" name="button" value="新增" οnclick="addRow('mytable');"/>
          </td>
        </tr>
        <tr>
          <td width="7%" class="cuti" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'><div align="center">序号

</div></td>
<td width="15%" height="20" class="cuti" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'><div

align="center">文本框</div></td>
<td width="15%" class="cuti" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'><div align="center">下拉

</div></td>
<td width="13%" class="cuti" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'><div align="center">小文本</div></td>
<td width="12%" class="cuti" style='border-bottom:1px #8CA5B5 solid;border-right:1px #8CA5B5 solid;'><div align="center">超链接

</div></td>
        </tr>

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

以上的实现方式：
步骤1：在需要添加行的table 定义id="mytable"
步骤2：在table里添加<tbody>标签定义id = "mytbody" 作用在于 js通过它判断需要添加行的位置

以上是个人的一点废话希望能对大家理解本JS有点帮助

下拉列表一块可以调用字符串如：

String select = "<option>下拉一</option><option selected>下拉二</option>";

td3.innerHTML+="<select name='select1'><%=select%></select>";

本人已经实验过了可以用