本文给大家分享一段 js 代码实现输入表格行数、列数自动生成表格源代码,非常不错具有参考借鉴价值,感兴趣的朋友一起学习吧
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
废话不多说,直接给大家贴 js 代码了,具体代码如下所示:
- //js实现输入表格行数、列数自动生成表格源代码
- <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
- <html xmlns="http://www.w3.org/1999/xhtml">
- <head>
- <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
- <title>自动创建表格</title>
- <style type="text/CSS">
- table{
- width:300px;
- height:100px;
- border:#0C9 1px solid;
- border-collapse:collapse;
- }
- </style>
- <script type="text/javascript" language="javascript">
- function autocreate(){
- //创建table表格
- var table=document.createElement("table");
- table.setAttribute("border","1");
- table.setAttribute("background","red");
- //获取行数值
- var line=document.getElementById("line").value;
- //获取列数值
- var list=document.getElementById("list").value;
- for(var i=0;i<=line;i++){
- //alert(line);
- //创建tr
- var tr=document.createElement("tr");
- for(var j=0;j<=list;j++){
- //alert(list);
- //创建td
- var td=document.createElement("td");
- tr.appendChild(td);
- }
- table.appendChild(tr);
- }
- document.getElementById("d1").appendChild(table);
- }
- </script>
- </head>
- <body>
- <input type="text" id="line">行数
- <input type="text" id="list">列数
- <input type="button" value="添加表格" onclick="autocreate()">
- <div id="d1" style="height:400px; width:300px;"></div>
- </body>
- </html>
以上所述是小编给大家介绍的基于 JavaScript 代码实现自动生成表格的全部叙述,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0303/264862.html