Question

How would you start writing a for loop for the code provided below:

<html>
<head>
</head>
<body>
Rows: <input name="rows" id="rows" type="text"/><br/>
<input type="submit" value="Make me a table!" onclick="makeTable();"/><br/><br/>

<table border="1" id="theTable">
</table>

<script type="text/javascript">
function makeTable(){

//Insert code here AND ONLY HERE!
//Write a for loop to create the number of rows specified in the "row" input field
</script>
</body>
</html>

Answer 1

As I suspect this is homework I will no provider a full code answer but instead provide you with a few guide lines that hopefully will help you.

You have the html and the javascript, in order to create new html elements you need to use the document.createElement(type) function that will create a new element, in your case - td/th ?

Then you need to insert it into your table You do that by obtaining the table(by id/type) - search the web for this one its very simple. And then using the append method on is with the created element.

You do all this process with a normal for loop that will run until the .value of the input tags you have in your html (Again, search for how to obtain these values)

Good luck =]

Answer 2

Is this what you are looking for?

function makeTable(){

    // Get values of rows/cols inputs
    var rows = document.getElementById('rows').value;
    var cols = document.getElementById('cols').value;
    // Check the values are in fact numbers
    if (!isNaN(rows) && !isNaN(cols)) {
        // Get the table element
        var table = document.getElementById('theTable');

        // Iterate through rows
        for (var r = 0; r < rows; ++r) {
            // Create row element
            var tr = document.createElement('tr');

            // Iterate through columns
            for (var c  = 0; c < cols; ++c) {
                // Create cell element
                var td = document.createElement('td');
                // Setting some text content
                td.textContent = 'R: ' + r + ', C: ' + c;
                // Append cell to row
                tr.appendChild(td);
            }
            // Append row to table
            table.appendChild(tr);
        }
    }
}

Answer 3

<!DOCTYPE html>
<html>
  <head>
<title>test</title>
  <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
</head>
 <body>

  Rows: <input name="rows" id="rows" type="text"/><br/>
  Cols: <input name="cols" id="cols" type="text"/><br/>
  <input type="submit" value="Make me a table!" onclick="makeTable();"/>   <br/><br/>

  <table border="1" id="theTable">

  <script type="text/javascript">
  function makeTable(){

   var html = "";
   var row=$('#rows').val();
   var col=$('#cols').val();

   for(var i=0; i<row; i++){
  html+="<tr>";
   for(var j=0;j<col; j++)
   {
       html+= '<td> Your data </td>';
     }
    html+="</tr>"
    }

   $('#theTable').html(html);


    //Insert code here AND ONLY HERE!
    //Write a for loop to create the number of rows specified in the "row" input field
    //create a dom element for the row to be added to the table
  }
   </script>

  </body>
 </html>

I have kept it simple. Hope it helps.

Create Javascript rows with user input

3 个答案: