add table rows using jquery

Question

I tried this to add row to table but this is not working ,and even not giving any error,where is mistake? I have added counter variable so that it will increment id ,so that value get stored in database properly

<html>
    <head>

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

     <script type="text/javascript" src=" https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
    </head>
    <body>
    <script type="text/javascript">
      $(document).ready(function () {
     var counter = 2;
    $("#addButton").click(function () {
     if (counter > 10) {
     alert("Only 10 rows allowed");
     return false;
    }
    $('#preq > tbody:last').append('<tr id="row'+counter+' "><td><input title="Enter Kind Of work '+counter+'" readonly="readonly" onclick="if(this.value!=''){this.value='';opendrop();}else{opendrop();}" id="other_work'+counter+'" name="other_work'+counter+'" type="text" size="30"    <?php if (isset($errors)) { echo 'value="'.htmlentities(@$_POST['other_work'+counter+'']).'"'; } ?> ></td> <td><input name="client_name'+counter+'" size="40" type="text" id="client_name'+counter+'"/></td><td><input name="firm_name'+counter+'" size="40" type="text" id="firm_name'+counter+'" />  </td>   </tr>');
      counter++;
     });

    </script>
    <table id="preq">
     <tbody>
      <tr>
    <td> 
    <input title="Enter Kind Of work 4" readonly="readonly" onclick="if(this.value!=''){this.value='';opendrop();}else{opendrop();}" id="other_work4" name="other_work4" type="text" size="30"    <?php if (isset($errors)) { echo 'value="'.htmlentities(@$_POST['other_work4']).'"'; } ?> >               
    </td>
     <td><input name="client_name4" size="40" type="text" id="client_name4"/>
    </td>
     <td><input name="firm_name4" size="40" type="text" id="firm_name4" />  </td>   
    </tr>
     </tbody>
    </table>

    <input type='button' value='Add Button' id='addButton' />

    </body>
    </html>

Possible duplicate of stackoverflow.com/questions/2160890/… & stackoverflow.com/questions/2228772/… & — palaѕн
– palaѕн, Commented Jan 3, 2013 at 9:43

Karthi Keyan · Accepted Answer · 2013-01-04 13:31:39Z

2

Here is the answer for your question.

$("#preq tbody").append('<tr id="row"><td></td><td></td><td></td></tr>');

Take a look at this demo, this may give help to you to add the rows in the table. Take a look at this JQFAQ.com and there are more FAQs available i hope this will help you to get more ideas.

answered Jan 4, 2013 at 13:31

Karthi Keyan

4,4235 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

add table rows using jquery

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related