php如何实现点击按钮表格增加一行
这篇文章主要介绍“php如何实现点击按钮表格增加一行”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“php如何实现点击按钮表格增加一行”文章能帮助大家解决问题。
首先,我们先准备一个表格并设置好最初的行数。具体代码如下:
<!DOCTYPE html>
<html>
<head>
<title>PHP 点击按钮表格增加一行</title>
<meta charset="UTF-8">
</head>
<body>
<table id="myTable" border="1">
<thead>
<tr>
<th>编号</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<?php
// 初始表格行数为 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() {
// 获取当前表格行数
var rowCount = document.getElementById("myTable").rows.length;
// 创建一行新的 table row 元素
var row = document.createElement("tr");
// 遍历表格头
for (var i = 0; i < 3; i++) {
// 创建新的 table cell 元素
var cell = document.createElement("td");
// 每列的内容
var column = "";
if (i == 0) {
// 序号列
column = rowCount;
} else {
// 输入框列
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
}
// 插入新的内容到 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>
,用于触发添加行的事件。点击按钮后,将会调用 JavaScript 中的 addRow()
函数。
function addRow() {
// 获取当前表格行数
var rowCount = document.getElementById("myTable").rows.length;
// 创建一行新的 table row 元素
var row = document.createElement("tr");
// 遍历表格头
for (var i = 0; i < 3; i++) {
// 创建新的 table cell 元素
var cell = document.createElement("td");
// 每列的内容
var column = "";
if (i == 0) {
// 序号列
column = rowCount;
} else {
// 输入框列
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
}
// 插入新的内容到 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
获取表格当前的行数。然后,使用 document.createElement("tr")
创建一个新的 <tr>
元素,使用 document.createElement("td")
循环创建三个新的 <td>
元素,并插入新的内容。最后,使用 document.getElementById("myTable").getElementsByTagName('tbody')[0].appendChild(row)
将新的行元素插入表格的 <tbody>
子元素中。需要注意的是,在创建新的输入框时,名称需要设置为不同的值,这里使用行数作为后缀,具体代码如下:
column = '<input type="text" name="' + (i == 1 ? 'name' : 'age') + rowCount + '">';
这样就可以实现在点击按钮时,动态增加表格行的效果了。
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码