网站首页编程语言正文

Table表格怎么无限添加内容

作者：華　　　更新时间： 2022-01-03 编程语言

自己做了一个简单的表格试过发现虽然可以无限添加内容，但是涉及到性别就会分不清男女，尝试后才晓得直接用name获值再去遍历会很好的避免这个问题。

另外贴上如何做无限添加的表格代码，这里用的是最简单的姓名性别班级年龄。并且有很多功能没有

首先把body里表格样式做出来

<body>

<div>

<form action="" method="post">

姓名：<input id="name" type="text" value="" /><br />

班级：<input id="Class" type="text" value="" /><br />

性别：<input id="sex" type="radio" value="男" name="sex" />男

<input id="sex" type="radio" value="女" name="sex" />女<br />

年龄：<input id="age" type="text" value="" /><br />

<input id="del++" type="button" value="添加" onclick="text()" />

<hr />

</form>



<table id="fatherlast" border="" cellspacing="" cellpadding="">

<tr>

<td>姓名</td>

<td>班级</td>

<td>性别</td>

<td>年龄</td>

<td>操作</td>

</tr>

</table>

</div>

</body>

框架出来了之后只需要用JS来做修饰就可以了。

我这里用的是最笨的方法。

创建函数，用户每点击一次添加就会有相应的 tr / td 新建并补充到 table 下。

这样就可以实现无限添加了。

<script type="text/javascript">

// 定义一个函数点击按钮添加信息到表格

function text() {

let father = document.getElementById("fatherlast");

let name = document.getElementById("name").value;

let tdName = document.createElement("td");

tdName.innerHTML = name;

let newTr = document.createElement("tr")

newTr.appendChild(tdName);

father.appendChild(newTr);

let Class = document.getElementById("Class").value;

let tdClass = document.createElement("td");

tdClass.innerHTML = Class;

newTr.appendChild(tdClass);

let sex = document.getElementsByName("sex");

let tdSex = document.createElement("td");

for (let i = 0; i < sex.length; i++) {

if (sex[i].checked == true) {

tdSex.innerHTML = sex[i].value; 

}

}

newTr.appendChild(tdSex);

let age = document.getElementById("age").value;

let tdAge = document.createElement("td");

tdAge.innerHTML = age;

newTr.appendChild(tdAge);

会存在性别取值getElementById不好用,因为ID有唯一性,既然是唯一就不能遍历,所获取的值就为空.但getElementByName不一样

其他的信息都可以输入并且实现成功添加后，在设置一个按钮删除功能就OK啦！

let del = document.getElementById("age").value;

let tdDel = document.createElement("td");

tdDel.innerHTML = "删除";

newTr.appendChild(tdDel);

// 点按钮删除整行

tdDel.onclick = function() {

newTr.remove();

}

}

</script>

</html>

到此就是最简单的无限添加内容的表格最笨的写法。哈哈哈哈......你们可以自行添加一些内容和元素。

原文链接：https://blog.csdn.net/m0_60563637/article/details/122099775

网站首页 编程语言 正文

Table表格怎么无限添加内容

相关推荐

网站首页编程语言正文