美文网首页
利用原生js写自动生成表单

利用原生js写自动生成表单

作者: 羞答答_aff1 | 来源:发表于2017-05-31 19:51 被阅读0次
    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <title>Document</title>
      <style>
          td {
              padding: 10px;
              border-collapse: collapse;
          }
      </style>
    </head>
    <body>
      行数:<input type="text" id="rows"><br>
      列数:<input type="text" id="columns"><br>
      宽度:<input type="text" id="width"><br>
      边框:<input type="text" id="border"><br>
      内容:<input type="text" id="center"><br>
      <button onclick="makeTable()">生成表格</button><br>
      <div id="table"></div>
      <script>
      function shengChengTable(rows,columns,width,border,center) {
          if (rows == 0) {
              rows = 5;
          }
          if (columns == 0) {
              columns = 5;
          }
          if (width == 0) {
              width = 500;
          }
          if (border == 0) {
              border = 1;
          }
          if(center == 0){
              center == 1;
          }
          var table = "<table border='"+border+"' width='"+width+"'>";
          for (var i = 0; i < rows; i++) {
              table += "<tr>";
              for (var j = 0; j < columns; j++) {
                  table += "<td>"+center+"</td>"
              
              }
              table += "</tr>";
          }
          table += "</table>";
          return table;
      }
      function makeTable() {
          var center_value =(document.getElementById("center").value);
          var rows_value = Number(document.getElementById("rows").value);
          var columns_value = Number(document.getElementById("columns").value);
          var width_value = Number(document.getElementById("width").value);
          var border_value = Number(document.getElementById("border").value);
          document.getElementById("table").innerHTML = shengChengTable(rows_value,columns_value,width_value,border_value,center_value);
      }
      </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:利用原生js写自动生成表单

          本文链接:https://www.haomeiwen.com/subject/jvbjfxtx.html