菜鸟求助,关于javascript对表格进行操作?
为什么只显示页面,功能却没有实现呢?
<html>
<head>
<script language="JavaScript"><!--
function addRow() { //添加行
var tableObj = document.getElementById("mainTb"); //获取表格相关属性
//设置行、名称、单位、按钮等相关变量
var newRowObj = tableObj.insertRow(tableObj.rows.length);
var newNameCell = newRowObj.insertCell(newRowObj.cells.[0];
var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]);
var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]);
//添加“姓名”表元
newNameCell.innerHTML = document.getElementById("newName").value;
//添加“单位”表元
newCompanyCell.innerHTML = document.getElementById("newCompany").value;
//添加“删除”表元
newButtonCell.innerHTML = '<input type="button" value="删除" onclick=
"deleteRow('+(tableObj.rows.length-1)+')">';
}
function deleteRow(index) { //删除行
var tableObj = document.getElementById("mainTb"); //获取表格相关属性
tableObj.deleteRow(index); //删除指定行
}
//-->
</script>
</head>
<body style="margin:40px">
<table id="mainTb" border="1">
<tr><th width="80">姓名</th><th width="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td>
<td><input type="button" value="删除" onclick="deleteRow(0)"></td></tr>
<tr id="row1"><td>李四</td><td>上海南嘉食品公司</td>
<td><input type="button" value="删除"onclick="deleteRow(1)"></td></tr>
</table><br>
<div>
<span id="new">
姓名:<input type="text" name="newName" id="newName"><br>
单位:<input type="text" id="newCompany">
<input type="button" value="新增" onclick="addRow()">
</span>
</div>
</body>
</html>
<html>
<head>
<script language="JavaScript"><!--
function addRow() { //添加行
var tableObj = document.getElementById("mainTb"); //获取表格相关属性
//设置行、名称、单位、按钮等相关变量
var newRowObj = tableObj.insertRow(tableObj.rows.length);
var newNameCell = newRowObj.insertCell(newRowObj.cells.[0];
var newCompanyCell = newRowObj.insertCell(newRowObj.cells[1]);
var newButtonCell = newRowObj.insertCell(newRowObj.cells.[2]);
//添加“姓名”表元
newNameCell.innerHTML = document.getElementById("newName").value;
//添加“单位”表元
newCompanyCell.innerHTML = document.getElementById("newCompany").value;
//添加“删除”表元
newButtonCell.innerHTML = '<input type="button" value="删除" onclick=
"deleteRow('+(tableObj.rows.length-1)+')">';
}
function deleteRow(index) { //删除行
var tableObj = document.getElementById("mainTb"); //获取表格相关属性
tableObj.deleteRow(index); //删除指定行
}
//-->
</script>
</head>
<body style="margin:40px">
<table id="mainTb" border="1">
<tr><th width="80">姓名</th><th width="250">单位</th></tr>
<tr id="row0"><td>张三</td><td>北京中软科技公司</td>
<td><input type="button" value="删除" onclick="deleteRow(0)"></td></tr>
<tr id="row1"><td>李四</td><td>上海南嘉食品公司</td>
<td><input type="button" value="删除"onclick="deleteRow(1)"></td></tr>
</table><br>
<div>
<span id="new">
姓名:<input type="text" name="newName" id="newName"><br>
单位:<input type="text" id="newCompany">
<input type="button" value="新增" onclick="addRow()">
</span>
</div>
</body>
</html>
...全文
相关推荐
菜鸟电子面单接口+js云打印+C#云打印.zip
该项目实现了菜鸟电子面单接口与JS、C#云打印功能的集成,包含通用工具类、请求响应契约、文件上传处理及自定义异常机制。核心功能涵盖日期格式化、API请求标准化、多文件上传支持等,适用于物流电子面单自动
node.js入门学习demo练习(基于菜鸟教程)
在本资源中,我们关注的是"Node.js入门学习demo练习",这是一系列基于菜鸟教程的实践项目。
w3cschool菜鸟教程离线版( 完整 )
《w3cschool菜鸟教程离线版(完整)》是一个包含丰富IT学习资源的压缩包,其中主要聚焦在Web开发的基础技术,如JavaScript和HTML。
JavaScript菜鸟忍者秘籍
JavaScript,简称JS,是一种广泛应用于网页和网络应用的脚本语言,它允许开发者在浏览器端实现动态内容、交互式界面以及对网页数据的处理。
JavaScript菜鸟学习教程
通过以上内容的学习,结合提供的"JavaScript菜鸟学习教程.doc"、"JavaScript中文版课件.doc"、"Js.pdf"等文档,以及"PPT"课件,初学者将逐步建立起JavaScript


