您的位置：首页 > 其它

一个具有简单的“删除整行”、“修改单元格内容”、“确定并显示修改过后的内容”的表格

2015-05-17 23:09 405 查看

一个具有简单的“删除整行”、“修改单元格内容”、“确定并显示修改过后的内容”的表格

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script style="text/javascript">
function fun1() //函数1：作用是删除整行
{
var table = document.getElementsByTagName("table")[0];
table.deleteRow(0)
}
function fun2()　　　　　　　　　　　　　　　　　　　　　　 //函数2：修改单元格里的内容
{
table = document.getElementsByTagName("table")[0]; //找到table标签
xg= table.rows[0].cells[0];　　　　　　　　　　　　　　//找到table标签下要被修改的那个单元格
xg.innerHTML="" //将找到的单元格的内容清空
var input=document.createElement("input") //创建一个新的元素“input”
input.type="text"　　　　　　　　　　　　　　　//input的属性为text文本
input.id ="in1"　　　　　　　　　　　　　　　　//给input加个id名称
xg.appendChild(input);　　　　　　　　　　　//将新建的input文本框插入单元格中

xg1= table.rows[0].cells[1];　　　　　　　　//同上，只是变成修改该行的第二个单元格，并且再插入input文本框
xg1.innerHTML=""
input=document.createElement("input")
input.type="text"
input.id ="in2"
xg1.appendChild(input);
}
function fun3()　　　　　　　　　　　　　　　　//函数3：将函数2中修改过的内容保存下来并显示在对应单元格中
{
var zhi=document.getElementById("in1").value; //找到id名为in1的单元格并接收它的value值
xg.textContent=zhi;　　　　　　　　　　　　　　　　　//将保存下来的value值显示出来
var zhi1=document.getElementById("in2").value;　　//同上
xg1.textContent=zhi1;
}
function fun4()
{
table = document.getElementsByTagName("table")[0];
table.deleteRow(1)
}
function fun5()
{
table = document.getElementsByTagName("table")[0];
xg2= table.rows[1].cells[0];
xg2.innerHTML=""
var input=document.createElement("input")
input.type="text"
input.id ="in3"
xg2.appendChild(input);

xg3= table.rows[1].cells[1];
xg3.innerHTML=""
input=document.createElement("input")
input.type="text"
input.id ="in4"
xg3.appendChild(input);
}
function fun6()
{
var zhi2=document.getElementById("in3").value;
xg2.textContent=zhi2;
var zhi3=document.getElementById("in4").value;
xg3.textContent=zhi3;
}
function fun7()
{
table = document.getElementsByTagName("table")[0];
table.deleteRow(1)
}
function fun8()
{
table = document.getElementsByTagName("table")[0];
xg4= table.rows[2].cells[0];
xg4.innerHTML=""
var input=document.createElement("input")
input.type="text"
input.id ="in5"
xg4.appendChild(input);

xg5= table.rows[2].cells[1];
xg5.innerHTML=""
input=document.createElement("input")
input.type="text"
input.id ="in6"
xg5.appendChild(input);
}
function fun9()
{
var zhi4=document.getElementById("in5").value;
xg4.textContent=zhi4;
var zhi5=document.getElementById("in6").value;
xg5.textContent=zhi5;
}
function fun10()
{
var table = document.getElementsByTagName("table")[0];
var tr = table.insertRow(3);
var td1=tr.insertCell(0);
var td2=tr.insertCell(1);
var td3=tr.insertCell(2);
var td4=tr.insertCell(3);
var td5=tr.insertCell(4);

td1.textContent=""
td2.textContent=""
td3.textContent=""
td4.textContent=""
td5.textContent=""

var but=document.createElement("input");
but.type="button";
but.value="删除"
td3.appendChild(but)

var but1=document.createElement("input");
but1.type="button";
but1.value="修改"
td4.appendChild(but1)

var but2=document.createElement("input");
but2.type="button";
but2.value="确定"
td5.appendChild(but2)
}

</script>
</head>
<body>
<table border="1">
<tr>
<td>aaaaaaa11</td>
<td>bbbbbbb</td>
<td> <input type="button" value="删除" onclick="fun1()"/></td>
<td> <input type="button" value="修改" onclick="fun2()"/></td>
<td><input type="button" value="确定" onclick="fun3()"/></td>
</tr>
<tr>
<td>aaaaaaa22</td>
<td>bbbbbbb</td>
<td> <input type="button" value="删除" onclick="fun4()"/></td>
<td> <input type="button" value="修改" onclick="fun5()"/></td>
<td><input type="button" value="确定" onclick="fun6()"/></td>
</tr>
<tr>
<td>aaaaaaa33</td>
<td>bbbbbbb</td>
<td> <input type="button" value="删除" onclick="fun7()"/></td>
<td> <input type="button" value="修改" onclick="fun8()"/></td>
<td><input type="button" value="确定" onclick="fun9()"/></td>
</tr>
<tr>
<td colspan="5" style="text-align: center"><input type="button" value="添加" onclick="fun10()"/></td>
</tr>
</table>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航