在上方文本框填入”姓名/Email/ 年齡”，實(shí)現(xiàn)在下方表格中動(dòng)態(tài)添加或刪除單元格
效果：
1. Html代碼：
<body><p align="center" id="info"> 姓名 : <input type="text" id = "username"> Email : <input type="text" id = "email"> 年齡 : <input type="text" id = "age"> </p><div align="center"><input type="button" value="添加" onclick="addRow()"></div><hr><table align="center" border="1" id = "testTble" style="width: 60%;text-align: center;border:1px solid lightgreen"> <tr> <td>姓名</td> <td>Email</td> <td>年齡</td> <td>操作</td> </tr></table>
2. JavaScript代碼：
<script type="text/javascript">// 三個(gè)文本框// 一個(gè)添加按鈕 按鈕實(shí)現(xiàn)功能 添加信息到表格中// 一個(gè)表格，行數(shù)動(dòng)態(tài)增加的 function addRow() { // 獲取input元素節(jié)點(diǎn)數(shù)組 var inputNodes = document.getElementsByTagName("input"); var str = new String(inputNodes[0].value); var str1 = new String(inputNodes[1].value); var str2 = new String(inputNodes[2].value); if ((str.length > 0) && (str1.length > 0) && (str2.length > 0)) { //添加一行 insertRow() 方法用于在表格中的指定位置插入一個(gè)新行 var newTr = testTble.insertRow(); //添加四列 sertCell() 方法用于在 HTML 表的一行的指定位置插入一個(gè)空的 <td> 元素 var newTd0 = newTr.insertCell(); var newTd1 = newTr.insertCell(); var newTd2 = newTr.insertCell(); var newTd3 = newTr.insertCell(); //分別給每一列賦值 newTd0.innerText= inputNodes[0].value; newTd1.innerText= inputNodes[1].value; newTd2.innerText= inputNodes[2].value; newTd3.innerHTML = "<input type='button' value='刪除' onclick='deleteTable(this)'>"; } else { alert("請(qǐng)先把信息填寫(xiě)完整！"); return; } } function deleteTable(r) { //獲取當(dāng)前表格行號(hào) var i = r.parentNode.parentNode.rowIndex; //調(diào)用deleteRow()刪除本行 document.getElementById('testTble').deleteRow(i); } </script>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
圖片精選
網(wǎng)友關(guān)注
