Add rows to a html table from a textbox value

Question

I want to copy the first row into the same table as many times as you type in, in a textbox.

<table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr id="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="text" />

<script>
  function showRow() {
    var header = Array();    
    $("#row").each(function (i) {
      header[i] = $(this).text();
    })
    alert(header);
  }
</script>

So I have created an array of the first row that alerts when you click the button. An example of my question:

If i type 5 in the textbox and click on the button the table should look like this:
ABC
123
123
123
123
123

Is this possible?

Answer 1

Try thisLink

  <table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr class="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" onclick="showRow()"/>
<input id="Text1" type="number" />



$(document).ready(function () {
     $('#Button1').click(function(){
        var num = $('input[id="Text1"]').val();
            alert(num);
            for(var i=0;i<num;i++){
            $('table[id="table1"]').append(' <tr class="row"><td>1</td><td>2</td><td>3</td></tr>');

        }
        });
    });

Answer 2

Ofc it is, just parse the textbox val() or value as int and to a for() loop to that number

Answer 3

Using jquery there is a lot of ways to do it. Look at these jQuery functions :

   clone()
   appendTo()
   insertAfter()

Answer 4

LIVE DEMO
Try this: Change your row to class.

HTML:

<table id='table1'>
  <tr>
    <td>A</td><td>B</td><td>C</td>
  </tr>
  <tr class="row">
    <td>1</td><td>2</td><td>3</td>
  </tr>
<table>

<input id="Button1" type="button" value="button" />
<input id="Text1" type="text" />

JQUERY:

 $('#Button1').on('click',function(e) {
        limit = $("#Text1").val();     
        for(i=0;i<parseInt(limit);i++)  {
          strText =  $(".row").first().clone();
          strText.appendTo("#table1");
        }
    });

Answer 5

I've made the class row rather than the id, so that we can target it (clone() would prevent duplicate ids anyway.)

You can just store the row as a jQuery object and then use a for() loop to clone that object and append it. Use the value entered in the textbox within your loop:

var $tbl = $('#table1'), origRow = $tbl.find('.row').first();
$('#Button1').on('click', function(){
   var num = $('#Text1').val();
   $tbl.find('.row').remove();
   for(i=0; i<num; i++){
       var newRow = origRow.clone();
       $tbl.append(newRow);        
   }
});

JSFiddle

I wasn't sure whether you would want the table to empty each time or just add the rows on to the end. If you want the rows to be added to the end, just remove the $tbl.find('.row').remove(); line.

Answer 6

You can try this one:

Logic is simple: Get the count from textbox, create row count no of times and append that row after last row in table. $('#row').html() will give inner element of first row.

<script>
  function showRow() {
    var i, num = $('#Text1').val();    
    for(i=0; i<num; i++){      
      $('#table1 > tbody:last').append('<tr id=row'+i+1+'>'+$('#row').html()+'</tr>');
    }
  }
</script>

DEMO Link