I can't add rows into table using jQuery

Question

I can't add rows into table with id myTable2 when I select any number in drop down list using jQuery. I want to add tr inside of this table.

My code is:

    <script src="js/jquery.min.js" type="text/javascript">
    </script>
    <script>

    function AddRow(id)
    {
     alert(id)
     for(var i=0;i<id-1;i++)
     {
   var text_box = "<tr><td><input type='text' name='dest[]'  value='' size='30' />
     </td>          <td><input type='text' name='destsub[]'  value='' size='35' />
    </td></tr>";
     $('#myTable2').append(text_box)    
    }

     }
    </script>

    DESTINATION COVERED
    <select name="covered" id="covered"  onchange="AddRow(this.value)">
      <?php

      for($i=1;$i<=100;$i++)
      {

      ?>
         <option value="<?php echo $i; ?>" ><?php echo  $i; ?></option>

         <?php

         }

         ?>
      </select>

    <table id="myTable2"  width="587" border="0">
    </table>

Anybody help me?

Have a look here - http://stackoverflow.com/questions/171027/add-table-row-in-jquery if you did a bit of searching before asking a question you may find the answer... — dotnethaggis, Apr 30 '14 at 07:08

Andrei · Answer 1 · 2014-04-30T08:06:16.710

http://jsfiddle.net/uXvJJ/ you can see here that it works:

Html that should be generated by your php:

<table id="myTable2"  width="587" border="0">
    <tr>
        <td height="23"><strong>DESTINATION COVERED</strong></td>
        <td height="23">
            <select name="covered" id="covered"  onchange="AddRow(this.value)">    
                <option value="0" >0</option>
                <option value="1" >1</option>
                <option value="2" >2</option>
            </select>
        </td>
    </tr>
</table>

Javascript:

 function AddRow(id)
 {
     alert(id)
     for(var i=0;i<id-1;i++)
     {
       var text_box = "<tr><td><input type='text' name='dest[]'  value='' size='30' /></td><td><input type='text' name='destsub[]'  value='' size='35' /></td></tr>";
         $('#myTable2').append(text_box)    
    }
}

It only adds rows when the value is 2 or more because of i < id-1 in the for loop. Only when you pass value 2 or more as parameter it will add the rows.

Update

I added here your updated Html and it works also: http://jsfiddle.net/uXvJJ/2/

Html:

   <select name="covered" id="covered"  onchange="AddRow(this.value)">    
       <option value="0" >0</option>
       <option value="1" >1</option>
       <option value="2" >2</option>
    </select>
    <table id="myTable2"  width="587" border="0">
    </table>

Update 2

Added one more option and demonstrated the fix to your for loop

http://jsfiddle.net/uXvJJ/3/

 function AddRow(id)
 {
     alert(id)
     for(var i=0;i<id;i++)
     {
       var text_box = "<tr><td><input type='text' name='dest[]'  value='' size='30' /></td><td><input type='text' name='destsub[]'  value='' size='35' /></td></tr>";
         $('#myTable2').append(text_box)    
    }
}

What is not working ? The jsFiddle is adding the rows as you wanted. I said there that it only adds rows when you select 2 and explained why. Explain your problem. — Andrei, Apr 30 '14 at 08:01
Updated the answer to add the fix to your for loop too. Is what happens in the jsFiddle what you expect ? — Andrei, Apr 30 '14 at 08:07

score 0 · Answer 2 · answered Apr 30 '14 at 07:11

0

Your AddRow function doesn't append a row, it appends an empty text note. This is a working fiddle that does what you need http://jsfiddle.net/sfarsaci/w3kj6/

answered Apr 30 '14 at 07:11

Totò

1,824
15
20

I had included the file – user3514095 Apr 30 '14 at 07:19

I can't add rows into table using jQuery

2 Answers2

Update

Update 2