html动态生成表格 具体要求如下1使用数组模拟出数据，姓名科目成绩2动态创建行和单元格；3为单元格填充数据4提供“删除”链接，可删除所在的行。
时间: 2024-04-03 09:37:11 浏览: 17
好的，根据您的要求，我可以给您提供一个简单的HTML代码示例，实现动态生成表格并提供删除功能。您可以参考以下代码：
```html
<!DOCTYPE html>
<html>
<head>
<title>动态生成表格</title>
<script>
function addRow() {
// 获取表格对象
var table = document.getElementById("myTable");
// 创建一行
var row = table.insertRow(-1);
// 创建单元格并填充数据
var cells = [];
for (var i = 0; i < 4; i++) {
cells[i] = row.insertCell(i);
}
cells[0].innerHTML = document.getElementById("name").value;
cells[1].innerHTML = document.getElementById("subject").value;
cells[2].innerHTML = document.getElementById("score").value;
cells[3].innerHTML = "<a href='#' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'>删除</a>";
// 清空输入框
document.getElementById("name").value = "";
document.getElementById("subject").value = "";
document.getElementById("score").value = "";
}
function deleteRow(index) {
// 获取表格对象
var table = document.getElementById("myTable");
// 删除指定行
table.deleteRow(index);
}
</script>
</head>
<body>
<table id="myTable" border="1">
<tr>
<th>姓名</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
<!-- 使用数组模拟数据 -->
<?php
$data = array(
array("张三", "语文", 90),
array("李四", "数学", 85),
array("王五", "英语", 95)
);
foreach ($data as $row) {
echo "<tr>";
echo "<td>".$row[0]."</td>";
echo "<td>".$row[1]."</td>";
echo "<td>".$row[2]."</td>";
echo "<td><a href='#' onclick='deleteRow(this.parentNode.parentNode.rowIndex)'>删除</a></td>";
echo "</tr>";
}
?>
</table>
<br>
<form>
<label>姓名：</label><input type="text" id="name"><br>
<label>科目：</label><input type="text" id="subject"><br>
<label>成绩：</label><input type="text" id="score"><br>
<button type="button" onclick="addRow()">添加</button>
</form>
</body>
</html>
```
该代码使用了PHP的数组模拟出数据，您可以根据实际情况进行修改。在页面中，通过`document.getElementById`获取输入框的值并创建一行，填充到表格中。同时，为每一行添加一个“删除”链接，点击链接时调用`deleteRow`函数删除对应行。
相关推荐
最新推荐
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
本文着重解决x-editable编辑的数据动态添加和显示数据为Empty的问题，还有给表格单元格的内容设置多样式，使得显示多样化,需要的朋友可以参考下
Java Swing实现JTable检测单元格数据变更事件的方法示例
主要介绍了Java Swing实现JTable检测单元格数据变更事件的方法,结合完整实例形式分析了Swing实现JTable检测单元格数据变更事件过程中出现的问题与相关解决方法,需要的朋友可以参考下
JS实现动态修改table及合并单元格的方法示例
主要介绍了JS实现动态修改table及合并单元格的方法,结合完整实例形式分析了JS动态遍历及修改table单元格的具体操作技巧,需要的朋友可以参考下
C#实现改变DataGrid某一行和单元格颜色的方法
主要介绍了C#实现改变DataGrid某一行和单元格颜色的方法,主要涉及DataGrid控件的添加与使用、数据源的绑定、单元格与行的获取等操作。需要的朋友可以参考下
IREPORT中多行某列数据的合并
IREPORT中多行某列数据实现合并效果，模板中相关属性的配置方法见附件。文档中展示的是PDF文件的演示效果。
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
MATLAB取整函数与Web开发的作用：round、fix、floor、ceil在Web开发中的应用
# 1. MATLAB取整函数概述**
MATLAB取整函数是一组强大的工具，用于对数值进行
我想做python的算法工程师，我应该学什么？学习的顺序是什么？网上有什么推荐的免费课程吗？回答具体精确一点不要太笼统
对于想要成为 Python 算法工程师的人来说，他们应该先从掌握 Python 的基础语法开始，然后学习数据结构和算法，并且要深入了解 Python 中的一些科学计算和数据处理库，比如 NumPy、Pandas 等。
学习的顺序可以是先学习基础语法和编程技巧，然后再学习数据结构和算法相关的知识，最后深入了解数据处理和科学计算相关的库。
对于免费课程的推荐，我建议你可以先去 Coursera、edX、Udacity 等网站上寻找相关课程，这些网站上有很多优质的 Python 编程和算法课程，你可以根据自己的需求和学习进度进行选择。此外，还可以考虑一些在线编程网站，如 HackerRank、L
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。