动态创建表格--只限于一次点击
来源：互联网 发布：网络老歌曲大全100首 编辑：程序博客网 时间：2024/06/03 23:43
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" onclick="createTable();"><input type="button" name="" value="清除表格" id="you" onclick="refresh()"><div id="tabled"></div></body></html>
0 0
