您的位置：首页 > Web前端 > JavaScript

表格：增加、删除行，鼠标移动改变行背景色，行内文本框自适应td，a除下划线（使用节点实现）

2016-08-25 16:20 806 查看

1.增加行

<html>代码
--------

<input type="button" value="添加一行" onclick="addOne()">

js代码
-----

function addOne()
{
var tbody = document.getElementById("table").lastChild;
var tr = document.createElement("tr");

var td = document.createElement("td");
td.innerHTML = "<input type='text'
style='border:none;width:100%;height:100%'>";
tr.appendChild(td);

td =document.createElement("td");
td.innerHTML = "<input type='text'
style='border:none;width:100%;height:100%'>"
tr.appendChild(td);

td =document.createElement("td");
td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>"
tr.appendChild(td);

tbody.appendChild(tr);
Highlight();//保证增加的行也有移动鼠标改变背景色的功能所以添加这个函数
}

2.删除行

<html>代码
--------

<table  border="1" width="50%" height="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>//this指代标签a
</table>

js代码
-----
function deleteRow(obj)
{
var tbody = document.getElementById("table").lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}

3.鼠标移动改变行背景色

<html>代码
--------

<table  border="1" width="50%" height="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>

注释
--

<a href="javascript:de(this)">与<a href="javascript:;" onclick="de(this)">的区别，使用onclick="de(this)"的时候，解释器会给他包装一个匿名函数，变成了：
a.onclick = function anonymous()
{
de(this);
}
这个this指的就是a这个对象，而使用href的方式时，由于是一个地址，这个this就无处可指了。

js代码
-----

function Highlight()
{
var tbody = document.getElementById("table").lastChild;
var trs = tbody.getElementsByTagName("tr");
for(var i=1;i<trs.length;i++)
{
trs[i].onmouseover = function(){
this.style.backgroundColor = "red";
}
trs[i].onmouseout = function(){
this.style.backgroundColor = "#fff";
}
}
}

4.行内文本框自适应td

js代码
-----
td.innerHTML = "<input type='text'
style='border:none;width:100%;height:100%'>";

5.a除下划线

css代码
-----
<style type="text/css">
a{
text-decoration:none;
}
</style>

6.程序源代码

实现功能如下图：

源代码

<%@ page language="java" contentType="text/html; charset=utf-8"

pageEncoding="utf-8"%>
<!DOCTYPE html>
<html>
<head>
<title>
编程挑战
</title>
<meta http-equiv="Content-Type" content="text/html  charset=utf=8">
<style type="text/css">
</style>
<style type="text/css">
a{
text-decoration:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
Highlight();
}
function addOne()
{
var tbody = document.getElementById("table").lastChild;
var tr = document.createElement("tr");

var td = document.createElement("td");
td.innerHTML = "<input type='text' style='border:none;width:100%;height:100%'>";
tr.appendChild(td);

td =document.createElement("td");
td.innerHTML = "<input type='text' style='border:none;width:100%;height:100%'>"
tr.appendChild(td);

td =document.createElement("td");
td.innerHTML = "<a href='javascript:;' onclick='deleteRow(this)'>删除</a>"
tr.appendChild(td);

tbody.appendChild(tr);
Highlight();
}
function deleteRow(obj)
{
var tbody = document.getElementById("table").lastChild;
var tr = obj.parentNode.parentNode;
tbody.removeChild(tr);
}
function Highlight(){
var tbody = document.getElementById("table").lastChild;
var trs = tbody.getElementsByTagName("tr");
for(var i=1;i<trs.length;i++)
{
trs[i].onmouseover = function(){
this.style.backgroundColor = "red";
}
trs[i].onmouseout = function(){
this.style.backgroundColor = "#fff";
}
}
}
</script>
</head>
<body>
<table  border="1" width="50%" height="50%" id="table">
<tr>
<th>学号</th>
<th>姓名</th>
<th>操作</th>
</tr>
<tr>
<td>xh001</td>
<td>王小明</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
<tr>
<td>xh002</td>
<td>刘小芳</td>
<td><a href="javascript:;" onclick="deleteRow(this)">删除</a></td>
</tr>
</table>
<input type="button" value="添加一行" onclick="addOne()">
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航