代码之家 › 专栏 › 技术社区 › Ram kumar

创建动态表字段

javascript

-2

Ram kumar · 技术社区 · 7 年前

我已经从提示符下的javascript创建了表。但我需要2个输入字段行/列,并且需要根据输入的设置值生成表

您可以看到下面的代码,我已经尝试使用javascript提示符了。

    var rows = prompt("How many rows for your multiplication table?");
    var cols = prompt("How many columns for your multiplication table?");
    if(rows == "" || rows == null)
   		 rows = 10;
    if(cols== "" || cols== null)
   		 cols = 10;
    createTable(rows, cols); // function initialize
    function createTable(rows, cols)
    {
      var j=1;
      var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>"; // to create table element
      for(i=1;i<=rows;i++) // loop for generate rows
      {
    	output = output + "<tr>";
        while(j<=cols)
        {
  		  output = output + "<td>" + i*j + "</td>"; // to create cells
   		  j = j+1;
   		}
   		 output = output + "</tr>";
   		 j = 1;
    }
    output = output + "</table>";
    document.write(output);
    }

2 回复 | 直到 7 年前

Azad 7 年前

function generate() {

  //remove current table
  var tbl = document.getElementById("myTable");
  if (tbl)
    tbl.parentNode.removeChild(tbl);

  var rows = document.getElementById('rows').value;
  var cols = document.getElementById('cols').value;

  if (rows == "" || rows == null)
    rows = 10;
  else
    rows = +rows; //convert to integer

  if (cols == "" || cols == null)
    cols = 10;
  else
    cols = +cols; //convert to integer

  //add a table element
  var table = document.createElement("TABLE");
  table.setAttribute("id", "myTable");
  table.setAttribute("border", "1");
  table.setAttribute("width", "500");
  table.setAttribute("cellspacing", "0");
  table.setAttribute("cellpadding", "5");
  document.body.appendChild(table);

  for (var i = 0; i < rows; i++) {

    //create a table row    
    var row = table.insertRow(i);

    for (var j = 0; j < cols; j++) {
      //create cell
      var cell = row.insertCell(j);
      cell.innerHTML = 'cell ' + i + ' ' + j;
    }

  }

}

<html>

<body>
  No of rows: <input type="text" id="rows"> <br> No of Columns: <input type="text" id="cols"> <br>
  <button id="generate-table" onClick="generate()">Generate</button>
</body>

</html>

chintuyadavsara 7 年前

如果您想通过 input 只需更换 prompt

function maketable(){
  var rows =document.getElementById("row").value;
  var cols = document.getElementById("col").value;
  if(rows == "" || rows == null)
    rows = 10;
  if(cols== "" || cols== null)
    cols = 10;
  createTable(rows, cols); // function initialize
  function createTable(rows, cols)
  {
    var j=1;
    var output = "<table border='1' width='500' cellspacing='0'cellpadding='5'>"; // to create table element
    for(i=1;i<=rows;i++) // loop for generate rows
    {
      output = output + "<tr>";
      while(j<=cols)
      {
        output = output + "<td>" + i*j + "</td>"; // to create cells
        j = j+1;
      }
      output = output + "</tr>";
      j = 1;
    }
    output = output + "</table>";
    document.getElementById("table-data").innerHTML = output;
  }
}

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>JS Bin</title>
  </head>
  <body>
    Row: <input type="number" id="row" class="row-number"></input>
  Column: <input type="number" id="col" class="row-column"></input>
  <button onclick="maketable()">Generate</button>
  <br><br>
  <div id="table-data">


  </div>
</body>
</html>