js创建table / 删除一行tr

浏览数：23 / 时间：2015年06月09日

代码：

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8"/>

</head>
<body>

</body>

var td1 = document.createElement("td");
var td2 = document.createElement("td");
var td3 = document.createElement("td");
var td4 = document.createElement("td");
var td5 = document.createElement("td");

tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
tr.appendChild(td5);

td1.innerHTML = ‘<input type="checkbox" id="chkall" onclick="selectAll()"/> 全选‘;
td2.innerHTML = "编号";
td3.innerHTML = "商品";
td4.innerHTML = "价格";
td5.innerHTML = "操作";

//下面使用HTML DOM
// var tr1 = t.insertRow(1);
// var td21 = tr1.insertCell(0);
// var td22 = tr1.insertCell(1);
// var td23 = tr1.insertCell(2);
// var td24 = tr1.insertCell(3);
// var td25 = tr1.insertCell(4);
//
// td21.innerHTML = ‘<input type="checkbox" name="chkbox" />‘;
// td22.innerHTML = "1";
// td23.innerHTML = "商品1";
// td24.innerHTML = "20";
// // 在A标签里面可以使用onclick事件，并且也推荐大家使用
// // 但是注意，用了onclick事件之后,需要在后面加上return false；
// //阻止a继续执行href里面的链接 td25.innerHTML = ‘<a href="#" onclick="deleteTr(this);return false;">删除</a>‘;
// td25.innerHTML = ‘<a href="#" onclick="deleteTr(this);return false;">删除</a>‘;

for(var i=1;i<5;i++){
var tr3 = t.insertRow(i);
var td31 = tr3.insertCell(0);
var td32 = tr3.insertCell(1);
var td33 = tr3.insertCell(2);
var td34 = tr3.insertCell(3);
var td35 = tr3.insertCell(4);

td31.innerHTML = ‘<input type="checkbox" name="chkbox" />‘;
td32.innerHTML = i;
td33.innerHTML = "商品"+i;
td34.innerHTML = "20";
//在A标签里面可以使用onclick事件，并且也推荐大家使用
//但是注意，用了onclick事件之后,需要在后面加上return false；
//阻止a继续执行href里面的链接
td35.innerHTML = ‘<a href="#" onclick="deleteTr(this);return false;">删除</a>‘;
}

document.body.appendChild(t);
}

function deleteTr(obj){
var tr = obj.parentNode.parentNode;
var t = document.getElementsByTagName("table")[0];

t.deleteRow(tr.rowIndex);
}

function selectAll(){
var chkall = document.getElementById("chkall");

var chks = document.getElementsByName("chkbox");

for(var i=0;i<chks.length;i++){
chks[i].checked = chkall.checked;
}
}

window.onload = createTable;
</script>
</html>

效果图：