JS如何生成动态列表-偶像资源网

本文实例为大家分享了JS如何生成动态列表的具体代码，供大家参考，具体内容如下

思路： JS中写函数—-HTML中利用表单元素获取用户输入的行和列的值，调用JS中的函数。
主要用到的知识有：JS就不说了，表单元素，以及其属性value，和表格…

代码：

<!doctype html>
<html>
<head>
 <meta charset = \"utf-8\">
 <title>创建动态表格</title>
 <style>
  #form1{
   padding:10px; width:400px; margin:0 auto;
  }
 </style>
 <script type = \"text/javascript\">
  function createTable() { 
   var r1 = document.getElementById( \"row\" ).value;
   var c1 = document.getElementById( \"col\" ).value; 
   var n = 1;  //单元格中的文字
   var str = \"<table width = \'100%\' border = \'1\' cellspacing = \'0\' cellpadding = \'0\' ><tbody>\";
   for(i = 0; i<r1; i++) {
    str = str+\"<tr align = \'center\'>\"
    for(j = 0; j<c1; j++) str = str+\"<td>\"+(n++)+\"</td>\"
    str = str+\"</tr>\"
   }
   var d1 = document.getElementById( \"d1\" );
   d1.innerHTML = str+\"</tbody></table>\";
  }
 </script>
</head>
<body>
 <form id = \"form1\" name = \"form1\" method = \"post\" action = \"\">
  <fieldset>
  <legend>动态创建表格</legend>
  输入表格的行数：<input type = \"text\" id = \"row\" placeholder = \"请输入表格的行数\" required autofocus /><br/>
  输入表格的列数：<input type = \"text\" id = \"col\" placeholder = \"请输入表格的列数\" /><br/>
  <input type = \"button\" id = \"ok\" value = \"产生表格\" onclick = \"createTable()\"/>
  </fieldset>
 </form>
 <div id = \"d1\"></div>
</body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持免费资源网。

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

JS如何生成动态列表

请登录后发表评论