<style type=
"text/css"
>
table{
border:1px solid
#000;
border-collapse: collapse;
}
th,td{
border:1px solid
#000;
padding:6px;
}
</style>
<script type=
"text/javascript"
>
function
addRow1(){
var
userInfo = document.getElementById(
"userInfo"
);
var
row = document.createElement(
"tr"
);
var
td1 = document.createElement(
"td"
);
td1.innerHTML =
"李四"
;
var
td2 = document.createElement(
"td"
);
td2.innerHTML =
"102"
;
var
td3 = document.createElement(
"td"
);
td3.innerHTML =
"北海"
;
var
td4 = document.createElement(
"td"
);
td4.innerHTML =
"<a onclick='delete(this)'>删除</a>"
;
row.appendChild(td1);
row.appendChild(td2);
row.appendChild(td3);
row.appendChild(td4);
userInfo.appendChild(row);
}
function
addRow2(){
var
userInfo = document.getElementById(
"userInfo"
);
var
rowLength = userInfo.rows.length;
var
tableRow = userInfo.insertRow(rowLength);
tableRow.innerHTML =
"<td>李四</td><td>102</td><td>四海</td><td><a onclick='deleteRow(this)'>删除</a></td>"
;
}
function
addRow3(){
var
userInfo = document.getElementById(
"userInfo"
);
var
rowLength = userInfo.rows.length;
var
tableRow = userInfo.insertRow(rowLength);
var
tableCell0 = tableRow.insertCell(0);
var
tableCell1 = tableRow.insertCell(1);
var
tableCell2 = tableRow.insertCell(2);
var
tableCell3 = tableRow.insertCell(3);
tableCell0.innerHTML =
"李四"
;
tableCell1.innerHTML =
"103"
;
tableCell2.innerHTML =
"黑海"
;
tableCell3.innerHTML =
"<a onclick='deleteRow(this)'>删除</a>"
;
}
function
deleteRow(_this){
var
userInfo = document.getElementById(
"userInfo"
);
var
rowIndex = getTrIndex(_this);
userInfo.deleteRow(rowIndex);
}
function
getTrIndex(element){
if
(element.tagName.toLowerCase() ==
"tr"
){
return
element.rowIndex;
}
else
{
return
getTrIndex(element.parentNode);
}
}
</script>