| 标题 | JS控制网页动态生成任意行列数表格的方法 |
| 内容 | 这篇文章主要介绍了JS控制网页动态生成任意行列数表格的方法,实例分析了javascript操作表格节点控制dom元素添加的技巧,具有一定参考借鉴价值,需要的朋友可以参考下 本文实例讲述了JS控制网页动态生成任意行列数表格的方法。分享给大家供大家参考。具体分析如下： 这是一个非常简单使用的JS在线生成表格的代码效果 通过JS功能代码，直接输入行数和列数就可以自动生成你需要的表格 当然你也可以扩展JS代码实现生成文字的各种形式 代码如下: <html> <head> <title>Js动态生成表格</title> <style type="text/css"> table{font-size:14px;} </style> </head> <body > <script language="javascript"> function tableclick(name1,name2,name3){ Trow=name1.value; Tcol=name2.value; Tv=name3.value; if ((Trow=="") || (Tcol=="") || (Tv=="")){ alert("请将制作表格的条件填写完整"); } else{ r=parseInt(Trow); c=parseInt(Tcol); Table1(r,c,Tv); } } function tablevalue(a,ai,rows,col,str){ int1=a.length; for (i=0;i<rows;++i){ for (j=0;j<col;++j){ if ((j==0)&&(ai>=int1)){break;} if (ai>=int1){ str=str+"<td scope='col'> </td>"; } else{ if (j==0){ str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"; } else{ if (j==col-1){ str=str+"<td scope='col'> "+(a[ai++])+"</td>"; } else{ str=str+"<td scope='col'> "+(a[ai++])+"</td>"; } } } } str=str+"</tr>"; } return str; } function Table1(row,col,Str1){ var str=""; a=new Array(); s=new String(Str1); a=s.split("#"); int1=a.length; ai=0; if (col<=int1){ str=str+"<table width='300' border='4'>"; for (i=0;i<col;++i){ if (i==0){ str=str+"<tr><th scope='col'> "+(a[ai++])+"</th>"; } else{ if (i==(col-1)){ str=str+"<th scope='col'> "+(a[ai++])+"</th></tr>"; } else{ str=str+"<th scope='col'> "+(a[ai++])+"</th>"; } } } if (int1>col){ if (row>1){ str=tablevalue(a,ai,row-1,col,str); } } str=str+ "</table>"; aa.innerHTML=str; } } </script> <form name="form1" method="post" action=""> <p><b>行数：</b> <input name="name1" type="text" value="4"> <b>列数：</b> <input name="name2" type="text" value="4"> <input type="button" name="Submit3" value="生成表格" onClick="tableclick(document.form1.name1,document.form1.name2,document.form1.name3)"></p> <p><b>表值：</b></p> <p> <input name="name3" wrap="VIRTUAL" value="COL1#COL2#COL3#COL4#ROW1#A1#A2#a3#ROW2#B1#B2#B3#ROW3#C1#C2#C3"> </p> </form> <div id="aa"></div> </body> </html> 希望本文所述对大家的javascript程序设计有所帮助。 |
| 随便看 |
|
在线学习网考试资料包含高考、自考、专升本考试、人事考试、公务员考试、大学生村官考试、特岗教师招聘考试、事业单位招聘考试、企业人才招聘、银行招聘、教师招聘、农村信用社招聘、各类资格证书考试等各类考试资料。