CODEWITHSUNDEEP
javascriptjqueryhtml
Dave
Dave

Reputation: 127

Add rows to a html table from a textbox value

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?

Upvotes: 0

Views: 4916

Answers (6)

Awlad Liton
Awlad Liton

Reputation: 9351

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");
        }
    });

Upvotes: 0

kamesh
kamesh

Reputation: 2424

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>');

        }
        });
    });

Upvotes: 0

Dhanu Gurung
Dhanu Gurung

Reputation: 8840

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

Upvotes: 0

George
George

Reputation: 36786

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.

Upvotes: 1

Yabada
Yabada

Reputation: 1758

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

   clone()
   appendTo()
   insertAfter()

Upvotes: 0

Banana
Banana

Reputation: 7463

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

Upvotes: 0

Related Questions