如何创建表格,创建行和列
如何创建表格,创建行和列
行: <input type="text" id="row" />
列: <input type="text" id="col" />
<button id="btn">创建</button>
<div id="wrap">
<!-- <table>
<tr>
<td></td>
</tr>
</table> -->
</div>
<script type="text/javascript">
function $(id){
return document.getElementById(id);
}
$("btn").onclick=function(){
$("wrap").innerHTML="";
var rows=$("row").value;
var cols=$("col").value;
var oTable=document.createElement("table");
oTable.border=2;
oTable.style.width="300px";
oTable.style.height="300px";
for(var i=0;i<rows;i++){
var oTr=document.createElement("tr");
for(var j=0;j<cols;j++){
var oTd=document.createElement("td");
oTr.appendChild(oTd);
}
console.log(rows.value)
var endTd=document.createElement("td");
endTd.innerHTML="<a href='javascript:;'>删除</a>";
oTr.appendChild(endTd);
oTable.appendChild(oTr);
}
$("wrap").appendChild(oTable);
var as=document.querySelectorAll("a");
for(var i=0;i<as.length;i++){
as[i].onclick=function(){
if(confirm("你确定删除吗")){
this.parentNode.parentNode.remove();
if(oTable.children.length==0){
oTable.remove();
}
}
}
}
}
</script>
当点击按钮的时候,获取输入框中填入的行和列的值,创建表格,并给表格添加样式
循环行和列数,创建行,然后创建列,并把列添加到行里面
再把行添加到表格里,这样才能形成一个完整的
表格。