使用js实现表格增加与删除
2016-07-25 10:41
501 查看
<!DOCTYPE html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function(){
var mytr=document.getElementsByTagName('tr');
for (var i =0 ; i <mytr.length; i++) {
newcolor(mytr[i]);
}
}
function newcolor(mtr) {
mtr.onmouseover=function(){
mtr.style.backgroundColor="#f2f2f2";
}
mtr.onmouseout=function(){
mtr.style.backgroundColor="#fff";
}
}
var num=2;
function addone() {
num++;
var tr=document.createElement("tr");
var td1=document.createElement("td");
var td2=document.createElement("td");
td1.innerHTML="xh00"+num;
var str=prompt("请输入姓名:");
td2.innerHTML=str;
var td3=document.createElement("td");
td3.innerHTML="<a hr
4000
ef='javascript:;' onclick='delone(this)' >删除</a>";
var tab=document.getElementById("table");
tab.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
var mytr=document.getElementsByTagName('tr');
for (var i =0 ; i <mytr.length; i++) {
newcolor(mytr[i]);
}
}
function delone(otr){
var a=otr.parentNode.parentNode;
a.parentNode.removeChild(a);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="delone(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="delone(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="addone()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
<html>
<head>
<title> new document </title>
<meta http-equiv="Content-Type" content="text/html"/>
<meta charset="utf-8"/>
<script type="text/javascript">
window.onload = function(){
var mytr=document.getElementsByTagName('tr');
for (var i =0 ; i <mytr.length; i++) {
newcolor(mytr[i]);
}
}
function newcolor(mtr) {
mtr.onmouseover=function(){
mtr.style.backgroundColor="#f2f2f2";
}
mtr.onmouseout=function(){
mtr.style.backgroundColor="#fff";
}
}
var num=2;
function addone() {
num++;
var tr=document.createElement("tr");
var td1=document.createElement("td");
var td2=document.createElement("td");
td1.innerHTML="xh00"+num;
var str=prompt("请输入姓名:");
td2.innerHTML=str;
var td3=document.createElement("td");
td3.innerHTML="<a hr
4000
ef='javascript:;' onclick='delone(this)' >删除</a>";
var tab=document.getElementById("table");
tab.appendChild(tr);
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
var mytr=document.getElementsByTagName('tr');
for (var i =0 ; i <mytr.length; i++) {
newcolor(mytr[i]);
}
}
function delone(otr){
var a=otr.parentNode.parentNode;
a.parentNode.removeChild(a);
}
</script>
</head>
<body>
<table border="1" width="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="delone(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="delone(this)" >删除</a></td> <!--在删除按钮上添加点击事件 -->
</tr>
</table>
<input type="button" value="添加一行" onclick="addone()" /> <!--在添加按钮上添加点击事件 -->
</body>
</html>
相关文章推荐
- java-WEB中的监听器Lisener
- GUI - Web前端开发框架
- Extjs4.0 最新最全视频教程
- MyEclipse Web Project转Eclipse Dynamic Web Project
- axis备忘
- 创业如何选择WEB开发语言
- Erlang实现的一个Web服务器代码实例
- 防止网页脚本病毒执行的方法-from web
- 自学成才的秘密:115个 web Develop 资源
- 使用批处理修改web打印设置笔记 适用于IE
- Apache Web让JSP“动”起来
- web下载的ActiveX控件自动更新
- 推荐六款WEB上传组件性能测试与比较第1/10页
- 关于三种主流WEB架构的思考
- 使用 Iisext.vbs 列出 Web 服务扩展文件的方法
- 使用 Iisext.vbs 删除 Web 服务扩展文件的方法
- 使用 iisext.vbs 禁用 Web 服务扩展的方法
- 用vbs 实现从剪贴板中抓取一个 URL 然后在浏览器中打开该 Web 站点
- web标准知识——从p开始,循序渐进
- web标准知识――用途相似的标签