|
发表于 2024-5-7 20:21:36
|
显示全部楼层
好的,下面是一个使用JavaScript实现动态表格,并通过点击事件完成CRUD效果的示例代码:
- <!DOCTYPE html>
- <html>
- <head>
- <style>
- table {
- width: 100%;
- border-collapse: collapse;
- }
-
- th, td {
- padding: 8px;
- text-align: left;
- border-bottom: 1px solid #ddd;
- }
-
- tr:hover {
- background-color: #f5f5f5;
- }
-
- .add-btn {
- margin-bottom: 10px;
- }
- </style>
- </head>
- <body>
- <h2>动态表格</h2>
-
- <div>
- <label>姓名:</label>
- <input type="text" id="name">
- <label>年龄:</label>
- <input type="number" id="age">
- <button onclick="addRow()">添加</button>
- </div>
-
- <table id="myTable">
- <tr>
- <th>姓名</th>
- <th>年龄</th>
- <th>操作</th>
- </tr>
- </table>
-
- <script>
- // 初始化数据
- var data = [
- { name: '张三', age: 20 },
- { name: '李四', age: 25 },
- { name: '王五', age: 30 }
- ];
-
- // 渲染表格
- function renderTable() {
- var table = document.getElementById('myTable');
-
- // 清空表格内容
- while (table.rows.length > 1) {
- table.deleteRow(1);
- }
-
- // 循环遍历数据,创建行并填充数据
- for (var i = 0; i < data.length; i++) {
- var row = table.insertRow();
- var cell1 = row.insertCell();
- var cell2 = row.insertCell();
- var cell3 = row.insertCell();
-
- cell1.innerHTML = data[i].name;
- cell2.innerHTML = data[i].age;
- cell3.innerHTML = '<button onclick="editRow(' + i + ')">编辑</button><button onclick="deleteRow(' + i + ')">删除</button>';
- }
- }
-
- // 添加新行
- function addRow() {
- var name = document.getElementById('name').value;
- var age = document.getElementById('age').value;
-
- if (name && age) {
- data.push({ name: name, age: age });
- renderTable();
-
- // 清空输入框
- document.getElementById('name').value = '';
- document.getElementById('age').value = '';
- } else {
- alert('请输入姓名和年龄');
- }
- }
-
- // 编辑行
- function editRow(index) {
- var newName = prompt('请输入新的姓名', data[index].name);
- var newAge = prompt('请输入新的年龄', data[index].age);
-
- if (newName && newAge) {
- data[index].name = newName;
- data[index].age = newAge;
- renderTable();
- } else {
- alert('请输入新的姓名和年龄');
- }
- }
-
- // 删除行
- function deleteRow(index) {
- if (confirm('确定要删除吗?')) {
- data.splice(index, 1);
- renderTable();
- }
- }
-
- // 初始化页面
- renderTable();
- </script>
- </body>
- </html>
复制代码
这段代码会创建一个动态的表格,用于展示姓名和年龄,然后提供了添加、编辑和删除功能。你可以在输入框中输入姓名和年龄,然后点击"添加"按钮将其添加到表格中;点击"编辑"按钮可以修改已有的行的内容;点击"删除"按钮可以删除对应的行。在每次进行操作后,表格会自动更新显示。
以上回复来自 FishC AI 小助理,如未能正确解答您的问题,请继续追问。 |
|