日本免费高清视频-国产福利视频导航-黄色在线播放国产-天天操天天操天天操天天操|www.shdianci.com

學無先后，達者為師

網站首頁 編程語言 正文

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

欄目分類
最近更新