Want to add table row using jquery on button click

Question

I am trying to wrtie the code in jquery which is call when the user clicks on the Add button. the function should take the value of the index of the row and add new row with some input elements in it at the end of the table. Here is something I tried, but I am going nowhere.

/* This is the jquery */
$("#add").click(function() {
    var fieldWrapper = NULL;
    var no_checkbox = $('<input type="checkbox" class="css-checkbox" id="checkbox[$index]"/><label for="checkbox[$index]" name="checkbox_lbl" class="css-label lite-x-red"></label>');
    no_checkbox.wrap('<td></td>');
    var q = $('<textarea name="question[]" id="bigarea" style="text-align:left;">');
    q.wrap('<td></td>');
    var yes_checkbox = $('<input name="qchecked[]" type="checkbox" class="css-checkbox" id="checkbox[$index]"/><label for="checkbox[$index]" class="css-label lite-y-green"></label>');
    yes_checkbox.wrap('<td></td>');


    var percentdropdown = '<select style="width:50px; height:25px;" />';
    for (var j = 0; j < 101; j += 5) {
        percentdropdown.append('<option name="effectiveness" value="j">j</option>');
    }

    var comment_box = '<textarea id="smallarea" placeholder="comments" name="comments[]"></textarea>';
    comment_box.wrap('<td></td>');

    fieldWrapper.append(no_checkbox);
    fieldWrapper.append(q);
    fieldWrapper.append(yes_checkbox);
    fieldWrapper.append(percentdropdown);
    fieldWrapper.append(comment_box);
    fieldWrapper.wrap('<tr></tr>');
    $("#checklist").append(fieldWrapper);
});
/* Here is the code on the button */
echo "<div class=savebtn align=center >";
echo "<input style='margin-bottom: 5px;margin-right:20px;' type='button' value='Add New Question' id='add'>";
echo "<input style='margin-bottom: 5px;' type='submit' value='Save' name='chklst_save'>";
echo "</div>";

This is how I want the row to be added. Please help. enter image description here

You are using jquery methods (append, wrap ..) on strings not on objects. — Sougata Bose
– Sougata Bose, Commented May 25, 2015 at 10:18
This could help, but I am looking for the answer without any plugin. and my scenario is little complicated as I need to preserve the index of the row of the table which I will be using to save data in to the database. — Maulik
– Maulik, Commented May 25, 2015 at 10:19
There are lot of errors in the code. Check the console. Those functions can not be used like this at least. — Sougata Bose
– Sougata Bose, Commented May 25, 2015 at 10:22
I am writing jquery for the first. It is very much possible that the code could be wrong. cold you please help with the correct code? — Maulik
– Maulik, Commented May 25, 2015 at 10:23

Yashwant Kumar · Accepted Answer · 2015-05-25 11:27:56Z

<table style="width:100%" id="addtablerow">
<th>First Checkbox</th>
<th>First Textarea</th> 
<th>Second Checkbox</th>
<th>Second Textarea</th>
<tr>
<td align="center"><input type="checkbox" value="1" name="first" /></td>
<td align="center"><textarea col="2" row="3" name="fisrttextarea"></textarea></td>
<td align="center"><input type="checkbox" value="1" name="second" /></td>
<td align="center"><textarea col="2" row="3" name="secondtextarea"></textarea></td>
</tr>
</table>
<button id="addnewrow">Add New Row</button>
<button>Save</button>
$(document).ready(function(){
window.uniqnumber = 1;
$("#addnewrow").click(function(){
var adduniq=uniqnumber++;           
add_responddiv(adduniq).appendTo("#addtablerow");
});
function add_responddiv(number)
{
    var uniqeid = Math.floor((Math.random() * 100) + 1);;
    var a ='<input type="checkbox" value="1" name="first'+number+'" />';
    var b='<textarea col="2" row="3" name="fisrttextarea'+number+'"></textarea>';
    var c='<input type="checkbox" value="1" name="second'+number+'" />';
    var d='<textarea col="2" row="3" name="secondtextarea'+number+'"></textarea>';              
    var n=$('<tr><td align="center">'+a+'</td><td align="center">'+b+'</td><td align="center">'+c+'</td><td align="center">'+d+'</td></tr>');
    return n 
    }
  });

Riddhi PAnchal · Accepted Answer · 2015-05-26 06:59:32Z

<table class="table">
  <thead>
    <tr>
      <th>Checkbox</th>
      <th>Textarea</th> 
    </tr>
</thead> 
 <tbody id="tableBody">
  <tr id="row1">
        <input type="hidden" id="rowid" value="1">
         <td align="center"><input type="checkbox" value="1" name="chk1" /></td>
        <td align="center"><textarea col="2" row="3" name="text1"></textarea></td>
  </tr>
</tbody>

 <button id="addnewrow">Add New Row</button>
  <button>Save</button>

$("#addnewrow").click(function(){
    var rowid=$("#rowid").val();
    var text=$("#text"+rowid).val();
    rowid=parseFloat(rowid)+1;
            $("#rowid").val(rowid);
    var data='<tr id="row'+rowid+'">';
     data +='<input type="hidden" id="rowid" value="'+rowid+'">';
             data +='<td align="center"><input type="checkbox" value="1" name="chk'+rowid+'" /></td>';
     data +='<td align="center"><textarea col="2" row="3" name="text'+rowid+'"></textarea></td>';
            data +='</tr>';
      $("#tableBody").append(data);
});

Collectives™ on Stack Overflow

Want to add table row using jquery on button click

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related