JS开端 、基础
本周开始学习JS了 、包含很多对象、函数
下面是我做的一个具有简单的“删除整行”、“修改单元格内容”、“确定并显示修改过后的内容”的表格
<!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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
