<!DOCTYPE html>
<html>
<head>
<title>jsDOM添加一行表格</title>
<style type="text/css">
td
{
style="border: 1px solid green
}
#table_target
{
position: relative;
left: 350px;
/*border: 2px solid orange;*/
text-align: center;
}
table
{
position: relative;
left: 0px;
600px;
padding: 0px;
/*border: 1px solid red;*/
}
td
{
20px;
border: 2px solid green;
}
#student
{
display: block; /*将行内元素变为块级元素*/
font-size: 30px;
margin: 30px;
margin-top: 100px;
text-align: center;
border: 2px solid red;
}
form
{
600px;
height: 20px;
/*border: 1px solid red;*/
margin-bottom: 20px;
}
.input_div
{
float: left;
display: inline;
150px;
}
input
{
100px;
border-color: red;
border-radius: 5px 5px;
}
.input_name
{
50px;
height: 20px;
}
.input_div2
{
float: left;
display: inline;
150px;
height: 20px;
/*border: 1px solid red;*/
margin-right: 0px;
}
.input_div2 input
{
150px;
}
</style>
</head>
<body>
<div id="table_target" style=" 600px; height: 500px;">
<span id="student">学生成绩表</span>
<table id="table_">
<tr>
<td>姓名</td>
<td>java</td>
<td>java_web</td>
<td>python</td>
</tr>
<tr>
<td>王磊</td>
<td>80</td>
<td>90</td>
<td>100</td>
</tr>
<tr id="trt">
<td>王五</td>
<td>100</td>
<td>100</td>
<td>100</td>
</tr>
</table>
<hr style="border: 2px solid orange;margin-top: 18px;">
<form id="information">
<div class="input_div">
<span class="input_name">姓名:</span><input id="a" type="text">
</div>
<div class="input_div">
<span class="input_name">java:</span><input id="b" type="text">
</div>
<div class="input_div">
<span class="input_name">jweb:</span><input id="c" type="text">
</div>
<div class="input_div">
<span class="input_name">pytn:</span><input id="d" type="text">
</div>
</form>
<form>
<div class="input_div2">
<input type="button" value="修改" onclick="modify_information()">
</div>
<div class="input_div2">
<input type="button" value="插入" onclick="insert_information()">
</div>
<div class="input_div2">
<input type="button" value="删除" onclick="delete_information()">
</div>
<div class="input_div2">
<input type="reset" value="清空" onclick="clear_information()">
</div>
</form>
<hr style="border: 2px solid orange;margin-top: 18px;">
</div>
</body>
<script language="javascript">
function modify_information()
{
//获取信息
var td1 = document.getElementById("a").value;
var td2 = document.getElementById("b").value;
var td3 = document.getElementById("c").value;
var td4 = document.getElementById("d").value;
var td_c = new Array(4);
td_c[0]=td1;
td_c[1]=td2;
td_c[2]=td3;
td_c[3]=td4;
//得到所有行
var data = document.getElementById("table_").rows;
//得到所有列
var columns = document.getElementById("table_").rows.item(0).cells;
var flag = false; //标志位
for (var i = 1; i < data.length; i++)
{
for (var j = 0; j < td_c.length; j++) //姓名匹配,写麻烦了，一个if就行，可是我很懒
{
if (data[i].cells[0].innerHTML == td_c[0])
{
flag = true;
break;
}
}
if (flag == false && i == data.length)
{
alert("学生不存在!请重新输入学生姓名");
break;
}
if (flag == true)
{
for (var j = 0; j < td_c.length; j++)
{
data[i].cells[j].innerHTML = td_c[j];
// alert(td_c[j]);
}
break;
}
}
if (flag == false)
alert("信息未修改,请重新输入!");
}
function insert_information()
{
//获得表单值
var td1 = document.getElementById("a").value;
var td2 = document.getElementById("b").value;
var td3 = document.getElementById("c").value;
var td4 = document.getElementById("d").value;
//标志位用来判断是否重复，广度优先遍历的思想
var flag = false;
//去重复插入
var data = document.getElementById("table_").rows;
for (var i = 1; i < data.length; i++) {
if (td1 == data[i].cells[0].innerHTML)
flag = true;
}
if (isNaN(td2) || isNaN(td3) || isNaN(td4))
{
alert("输入格式错误,请输入数字!");
}
else if ((td2 < 0 || td2 > 100) || (td3 < 0 || td3 > 100) || (td4 < 0 || td4 > 100))
{
alert("请输入0~100之间的有效成绩!");
}
else if (flag == true)
{
alert("已经有该同学的信息了!");
}
else if (td1 != "" && td2 != "" && td3 != "" && td4 != "")
{
//生成DOM结点 tr , td
var td_1 = document.createElement("td");
var td_2 = document.createElement("td");
var td_3 = document.createElement("td");
var td_4 = document.createElement("td");
var tr = document.createElement("tr");
//为DOM结点赋值
td_1.innerHTML = td1;
td_2.innerHTML = td2;
td_3.innerHTML = td3;
td_4.innerHTML = td4;
//将td加入到tr中去
tr.appendChild(td_1);
tr.appendChild(td_2);
tr.appendChild(td_3);
tr.appendChild(td_4);
//将tr加入到table中去
document.getElementById("table_").appendChild(tr);
}
else
{
alert("请入数据!!!");
}
}
function delete_information()
{
//获取信息
var td1 = document.getElementById("a").value;
var flag = false;
//得到所有td
var data = document.getElementById("table_").rows;
for (var i = 1; i < data.length; i++) {
if (td1 == data[i].cells[0].innerHTML)
{
flag = true;
document.getElementById("table_").deleteRow(i);
}
}
if (flag == false)
alert("没有该同学的信息");
}
function clear_information()
{
//获得表单值
document.getElementById("a").value="";
document.getElementById("b").value="";
document.getElementById("c").value="";
document.getElementById("d").value="";
}
/*
js的表格对象:
//表格行数
法1.var rows = document.getElementById("example_table").rows.length;
法2.
//获取表格中的所有行的结点(tr....tr数据),返回值是数组
var data = document.getElementById("example_table").rows;
//获得所有行的数目(tr的数目)
var length = data.length;
//表格列数 ,item是获取表格中的一个条目(这里是一行)
法1:
var cells = document.getElementById("example_table").rows.item(0).cells.length;
法2:
//获取表格中的所有行的结点(tr....tr数据),返回值是数组
var data = document.getElementById("example_table").rows;
//获取列数
var cells = data[0].cells.length;
//表格对象的方法 table的方法
createCaption() 为表格创建一个 caption 元素。
createTFoot() 在表格中创建一个空的 tFoot 元素。
createTHead() 在表格中创建一个空的 tHead 元素。
deleteCaption() 从表格删除 caption 元素以及其内容。
deleteRow(行号) 从表格删除一行。
deleteTFoot() 从表格删除 tFoot 元素及其内容。
deleteTHead() 从表格删除 tHead 元素及其内容。
insertRow(行号) 在表格中插入一个新行。
//insertRow(行号i) 是插入在第i行前面一行,if i==表格行数,会将该数据插入到该表格的最后一行
//插入举例
function insRow(id) {
//在表格的第三行前插入一行数据 x指向这一行
var x = document.getElementsByName("table").insertRow(3);
//给该行插入列和列的数据
var y = x.insertCell(0);
var z = x.insertCell(1);
y.innerHTML = z.innerHTML = "ppp";
}
//也可以用DOM来操作表格对象
*/
</script>
</html>
截图:
