javascript--动态添加表格(三种方法) 向右看齐 2022-08-23 04:57 194阅读 0赞 题目:用户输入行和列,动态创建表格: 方法一:createElement(),创建标签(缺点:每创建表格在原来的基础上新建表格) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态添加表格-createElement方法</title> </head> <body> <form> 行:<input type="text" id="col"> 列:<input type="text" id="row"> <input type="button" value="创建表格" onclick="creatTable()"><br/> </form> <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table> <script> var table=document.getElementById("tab"); function creatTable(){ var col=document.getElementById("col").value; var row=document.getElementById("row").value; for(var n=0;n<col;n++){ //创建<tr></tr>标签 var hang=document.createElement("tr"); for(var m=0;m<row;m++){ //创建<td></td>标签 var lie=document.createElement("td"); //将列元素添加到行元素中。形式:<tr><td></td><td></td>........</tr> hang.appendChild(lie); } //将行元素添加到表格中 table.appendChild(hang); } } </script> </body> </html> 方法二:标签拼接(无以上缺点) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态添加表格-标签拼接</title> </head> <body> <form> 行:<input type="text" id="col"> 列:<input type="text" id="row"> <input type="button" value="创建表格" onclick="creatTable()"><br/> </form> <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table> <script> var table=document.getElementById("tab"); function creatTable(){ var col=document.getElementById("col").value; var row=document.getElementById("row").value; var str=""; for(var n=0;n<col;n++){ //表格行元素的开始标记<tr> str=str+"<tr>"; for(var m=0;m<row;m++){ //表格列标签<td></td> str=str+"<td>"+"</td>"; } //表格行元素的结束标记</tr> str=str+"</tr>"; table.innerHTML=str; } } </script> </body> </html> 方法三:标签拼接+变量指向函数(var 变量名=函数名;)无以上缺点 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动态添加表格</title> </head> <body> <form> 行:<input type="text" id="col"> 列:<input type="text" id="row"> <input type="button" value="创建表格" onclick="fun()"><br/> </form> <table border="1" style="width:500px;height: 500px;background:pink;" id="tab"></table> <script> var table=document.getElementById("tab"); //第四步:creatTable()函数接收,进行传参(写上传参的值) function creatTable(col,row){ var str=""; for(var n=0;n<col;n++){ //表格行元素的开始标记<tr> str=str+"<tr>"; for(var m=0;m<row;m++){ //表格列标签<td></td> str=str+"<td>"+"</td>"; } //表格行元素的结束标记</tr> str=str+"</tr>"; table.innerHTML=str; } } //第三步:对象指向函数 var obj=creatTable;//不加括号 //第一步:点击函数:定义变量获取两个的值 function fun(){ var col=document.getElementById("col").value; var row=document.getElementById("row").value; //第二步:传参,将两个值传给变量 obj(col,row); } </script> </body> </html>
还没有评论,来说两句吧...