<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
body,table,th,td,input{font-size: 12px;}
#tabScore{border-collapse: collapse}
#tabScroe th{padding: 5px}
#tabScore td{padding: 5px}
</style>
</head>
<script>
function addScore(){
var name=document.getElementById("username").value;
var java=document.getElementById("java").value;
var html=document.getElementById("html").value;
var sql=document.getElementById("sql").value;
var count=parseInt(java)+parseInt(html)+parseInt(sql);
var tab=document.getElementById("tabScore");
var row=tab.insertRow();
var td_name=row.insertCell();
td_name.style.textAlign="center";
td_name.innerText=name;
var td_java=row.insertCell();
td_java.style.textAlign="center";
td_java.innerText=java;
var td_html=row.insertCell();
td_html.style.textAlign="center";
td_html.innerText=html;
var td_sql=row.insertCell();
td_sql.style.textAlign="center";
td_sql.innerText=sql;
var td_count=row.insertCell();
td_count.style.textAlign="center";
td_count.innerText=count;
var del=document.createElement("input");//创建input删除按钮
del.setAttribute("type","button");//或者del.type="button";del.value="删除"
del.setAttribute("value","删除");
del.setAttribute("onclick","del(this)")
// del.type="button";
// del.value="删除";
var td_del=row.insertCell();
td_del.style.textAlign="center";
td_del.appendChild(del);
}
function del(r){
var i=r.parentNode.parentNode.rowIndex;//找出要删除的行索引
var tab=document.getElementById("tabScore");
tab.deleteRow(i);
}
</script>
<body>
姓名：<input type="text"id="username" size="10"/>
java:<input type="text" id="java" size="3" maxlength="2"/>
Html:<input type="text" id="html" size="3" maxlength="2"/>
sql:<input type="text" id="sql" size="3" maxlength="2"/>
<input type="button" value="添加" οnclick="addScore()">
<hr size="1">
<table id="tabScore" width="470" border="1"bordercolor="#003399">
<tr bgcolor="#09f">
<th>姓名</th>
<th>java</th>
<th>html</th>
<th>sql</th>
<th>总成绩</th>
</tr>
</table>
</body>
</html>
js中dom操作：
1.创建元素：var input=document.createElement("input")创建一个input标记。
2.添加属性input.setAttribute("属性名"，“属性值”)；
3.添加行：table.insertRow();给表格插入行。删除行：deleteRow()
4.添加单元格：row.insertCell();给行插入表格。删除单元格：deleteCell()
5.获得集合table.rows table.cells（ 整个表中的所有表格） row.cells(行中的所有表格)
转载于:https://www.cnblogs.com/jxh-blog/p/9463871.html
