溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“php如何實(shí)現(xiàn)點(diǎn)擊按鈕表格增加一行”的相關(guān)知識，小編通過實(shí)際案例向大家展示操作過程，操作方法簡單快捷，實(shí)用性強(qiáng)，希望這篇“php如何實(shí)現(xiàn)點(diǎn)擊按鈕表格增加一行”文章能幫助大家解決問題。
首先，我們先準(zhǔn)備一個表格并設(shè)置好最初的行數(shù)。具體代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>PHP 點(diǎn)擊按鈕表格增加一行</title>
<meta charset="UTF-8">
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>編號</th>
<th>姓名</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<?php
// 初始表格行數(shù)為 3
$row = 3;
for ($i = 1; $i <= $row; $i++) {
echo '<tr>';
echo '<td>'.$i.'</td>';
echo '<td><input type="text" name="name'.$i.'"></td>';
echo '<td><input type="text" name="age'.$i.'"></td>';
echo '</tr>';
}
?>
</tbody>
</table>
<br>
<button onclick="addRow()">增加一行</button>
<script>
function addRow() {
// 獲取當(dāng)前表格行數(shù)
var rowCount = document.getElementById("myTable").rows.length;
// 創(chuàng)建一行新的 table row 元素
var row = document.createElement("tr");
// 遍歷表格頭
for (var i = 0; i < 3; i++) {
// 創(chuàng)建新的 table cell 元素
var cell = document.createElement("td");
// 每列的內(nèi)容
var column = "";
if (i == 0) {
// 序號列
column = rowCount;
} else {
// 輸入框列
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
}
// 插入新的內(nèi)容到 cell 元素
cell.innerHTML = column;
// 插入 cell 元素到 row 元素
row.appendChild(cell);
}
// 插入新的 row 元素到 table 元素的 tbody 子元素
document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row);
}
</script>
</body>
</html>
在表格最后面增加了一個按鈕 <button onclick="addRow()">增加一行</button>，用于觸發(fā)添加行的事件。點(diǎn)擊按鈕后，將會調(diào)用 JavaScript 中的 addRow() 函數(shù)。
function addRow() {
// 獲取當(dāng)前表格行數(shù)
var rowCount = document.getElementById("myTable").rows.length;
// 創(chuàng)建一行新的 table row 元素
var row = document.createElement("tr");
// 遍歷表格頭
for (var i = 0; i < 3; i++) {
// 創(chuàng)建新的 table cell 元素
var cell = document.createElement("td");
// 每列的內(nèi)容
var column = "";
if (i == 0) {
// 序號列
column = rowCount;
} else {
// 輸入框列
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
}
// 插入新的內(nèi)容到 cell 元素
cell.innerHTML = column;
// 插入 cell 元素到 row 元素
row.appendChild(cell);
}
// 插入新的 row 元素到 table 元素的 tbody 子元素
document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row);
}
該方法中，首先通過 document.getElementById("myTable").rows.length 獲取表格當(dāng)前的行數(shù)。然后，使用 document.createElement("tr") 創(chuàng)建一個新的 <tr> 元素，使用 document.createElement("td") 循環(huán)創(chuàng)建三個新的 <td> 元素，并插入新的內(nèi)容。最后，使用 document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row) 將新的行元素插入表格的 <tbody> 子元素中。
需要注意的是，在創(chuàng)建新的輸入框時，名稱需要設(shè)置為不同的值，這里使用行數(shù)作為后綴，具體代碼如下：
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
這樣就可以實(shí)現(xiàn)在點(diǎn)擊按鈕時，動態(tài)增加表格行的效果了。
關(guān)于“php如何實(shí)現(xiàn)點(diǎn)擊按鈕表格增加一行”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點(diǎn)。
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號
手機(jī)網(wǎng)站二維碼
