动态创建表格--只限于一次点击

最新推荐文章于 2021-08-17 11:43:18 发布

Ycix

最新推荐文章于 2021-08-17 11:43:18 发布

阅读量307

点赞数

分类专栏：前端JS

本文链接：https://blog.csdn.net/YCixZoem/article/details/60140768

版权

前端JS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

2017.4.15突然想到坑还没填，更新解决刷新旧表格

源代码如下：正在解决多次点击，清除前次表格的bug

<!DOCTYPE html>
<html>
<head>
	<title>动态生成表格</title>
	<meta charset="utf-8">
	
</head>
<body>
<script type="text/javascript">
function refresh(tbody){
  //var =document.body;
  var tbody=document.getElementById("tabled");
		for(var i=tbody.childNodes.length-1;i>=0;i--){
      tbody.removeChild(tbody.childNodes[i]);
    }

	}
  
	function createTable(){
  var hang=document.getElementById("h11").value;
  //console.log(typeof(hang));是string啊
  var lie=document.getElementById("l1").value;

  var pattern=/^([1,9]\d{0,1}|100)$/;
  //console.log(pattern.test(1232))patt没毛病
  if(hang==0||lie==0){
  	alert("请输入1-100的正确值！");
    return;
	}


var table=document.createElement("table");//当创建一个未定义的元素时，创建一个HTMLUnknownElement。  
var tbody=document.createElement('tbody');  
for(var i=0;i<parseInt(hang);i++)  
{  
    var tr=document.createElement('tr');  
    for(var j=0;j<parseInt(lie);j++){  
        var td=document.createElement('td');  
        var inner=document.createTextNode(i+j);  
        td.appendChild(inner);  
        tr.appendChild(td);  
    }  
    tbody.appendChild(tr)  
}  
table.appendChild(tbody);  
document.getElementById('tabled').appendChild(table)  
;  
table.setAttribute('border','1');









//else if(!pattern.test(hang))
	//{
//		alert("请输入1-100的正确值！");
	//}
		


 
}

</script>

<div><label for="Hang"> 行数</label>
<input type="text" name="Hang" id="h11"></div>
<div><label for="Lie">列数</label>
<input type="text" name="Lie" id="l1" ></div>

<input type="button" name="" value="生成表格" id="we" οnclick="createTable();">
<input type="button" name="" value="清除表格" id="you" οnclick="refresh()">
<div id="tabled">
</div>
</body>
</html>