javascript表格信息增添与删除

JavaScript入门
JavaScript是一种轻量级、解释型的Web开发语言，该语言系统不是很庞杂，简单易学。由于所有现代浏览器都已经嵌入了JavaScript引擎，JavaScript源代码可以再浏览器中直接被解释执行，用户不用担心支持问题，这是一个js入门的小练习

对于表格信息的增添与删除

简单的DOM操作html标签即可实现，代码如下：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Document</title><style type="text/css">*{margin: 0;padding: 0;}</style><script type="text/javascript">function delA(){//点击超链接删除那一行//使用this，删除父级元素var tr = this.parentNode.parentNode;//获取要删除人员的名字var name=tr.getElementsByTagName("td")[0].innerHTML;//提示用户是否删除var flag=confirm("是否删除"+name+"？");if(flag){tr.parentNode.removeChild(tr);}//阻止浏览器默认行为，比如弹出新的标签页return false;}window.onload=function(){//点击超链接删除一个员工信息//获取链接var allA=document.getElementsByTagName("a");//绑定响应函数for(var i=0;i<allA.length;i++){allA[i].onclick=delA;}//添加员工功能,点击按钮将信息添加到表格中var addEmpButton = document.getElementById("addEmpButton");addEmpButton.onclick=function(){//获取输入框中的文本内容var empName=document.getElementById("empName").value;var email=document.getElementById("email").value;var salary=document.getElementById("salary").value;//创建一个trvar tr=document.createElement("tr");//向tr中添加内容tr.innerHTML="<td>"+empName+"</td>"+"<td>"+email+"</td>"+"<td>"+salary+"</td>"+"<td><a href='javascript:;'>Delete</a></td>";var a=  tr.getElementsByTagName("a")[0];a.onclick=delA;//把tr放在table中var employeeTable=document.getElementById("employeeTable");//获取tbodyvar tbody=document.getElementsByTagName("tbody")[0];tbody.appendChild(tr);}}</script>
</head>
<body><table id="employeeTable"><tr><th>Name</th><th>Email</th><th>Salary</th><th>&nbsp;</th></tr><tr><td>Tom</td><td>tom@tom.com</td><td>5000</td><td><a href="">Delete</a></td></tr><tr><td>Jerry</td><td>jerry@sohu.com</td><td>8000</td><td><a href="">Delete</a></td></tr><tr><td>Bob</td><td>bob@tom.com</td><td>10000</td><td><a href="">Delete</a></td></tr><div id="formDiv"><h4>添加新员工</h4><table><tr><td class="word">name: </td><td class="inp"><input type="text" name="empName" id="empName"></td></tr><tr><td class="word">email: </td><td class="inp"><input type="text" name="email" id="email"></td></tr><tr><td class="word">salary: </td><td class="inp"><input type="text" name="salary" id="salary"></td></tr><tr><td colspan="2" align="center"> <!--colspan和rowspan属性是单元格可横跨的行数和列数--><!--align属性是文本对齐位置--><button id="addEmpButton" value="abc">Submit</button></td></tr></table></div></table>
</body>
</html>

代码片段里注释非常清楚，适合拿来练练手。

javascript表格信息增添与删除相关推荐

js实现表格的增添和删除操作
<!DOCTYPE html> <html><head><meta charset="UTF-8"><title>< ...
如何使用中继器和动态面板实现表格的增添和删除功能
在Axure面板中拖入元件中继器和动态面板,接着,在中继器的样式里和双击中继器出现的内容框中添加所需行的内容. 注意:双击中继器的内容框中的内容要以[[item .**]]的形式输入.首行的标题可以通 ...
js跟php增加删除信息,浅谈JavaScript数组的添加和删除
本文给大家浅谈一下JavaScript数组的添加和删除 ,有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 1.添加 (1)最简单的方法:为新索引赋值 (2)使用push()和unsh ...
MATLAB gui 对表格增添（删除）数据
对 uitable 添加一行记录当前的表格信息 data = get(handles.uitable1,'Data')row = get(handles.uitable1,'RowName') ...
html表格中添加修改和删除链接,jQuery实现为table表格动态添加或删除tr功能示例...
本文实例讲述了jQuery实现为table表格动态添加或删除tr功能.分享给大家供大家参考,具体如下: HTML页面元素如下: 订单合同号捆包号品名规格材质重量业务需求是,从后台获取到订单 ...
jquery实现表格的多行删除
初学jquery,发现自己比较脑残的一味百度,找到一些代码,就想着运行,出现问题不知道怎么解决. 下面介绍如何运用jquery实现表格的多行删除首先如果你没有jquery类库,要先下载jquery类 ...
JavaScript 表格专题
JavaScript表格专题表格的属性和方法表格的属性表格的方法 TableRow对象方法表格的属性和方法表格的属性 cells:返回包含表格中所有单元格的一个数组语法:tableObje ...
分享12款 JavaScript 表格控件（DataGrid）
JavaScript 表格控件可以操作大数据集的 HTML 表格,提供各种功能,如分页.排序.过滤以及行编辑.在本文中,我们整理了13个最好的 JavaScript 表格插件分享给开发人员,开发者可以 ...
jQuery为table表格动态添加或删除tr
HTML页面元素如下:  <div id="contractDetailDiv" title="销售订单明细&qu ...

javascript表格信息增添与删除

javascript表格信息增添与删除相关推荐

最新文章

热门文章