amitgeek amitgeek - 4 months ago 16
HTML Question

my Dynamic Table row creation Code doesnt work

I want to create a dynamic table. This code was working fine for me until i had Text box instead of this combo box in "Recruitment stage " column

I have used help of this code snippet http://bootsnipp.com/snippets/featured/dynamic-table-row-creation-and-deletion

so my problem is i can't add rows after changing above mentioned code snippet into below code.

so Please some one tell me why this isn't working?

This is screenshot of my table https://scontent-b-sin.xx.fbcdn.net/hphotos-xap1/v/l/t1.0-9/p118x118/1920631_767832533264997_3927859617455363653_n.jpg?oh=11445485fb638f37534179b6ed2eaaf4&oe=5509770D

Quick reply would be appreciated



$(document).ready(function(){
var i=1;
$("#add_row").click(function(){
$('#addr'+i).html("<td>"+ (i+1) +"</td><td>
<select name='course"+i+"' class='form-control'>
<option value=''>Select</option>
<option value='1'>Telephonic Interview</option>
<option value='2'>Skype Interview</option>
<option value='3'>Personal Interview</option>
</select>
</td><td><input name='mail"+i+"' type='text' placeholder='Mail' class='form-control input-md'></td><td><input name='mobile"+i+"' type='text' placeholder='Mobile' class='form-control input-md'></td>");

$('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
i++;
});
$("#delete_row").click(function(){
if(i>1){
$("#addr"+(i-1)).html('');
i--;
}
});

});

<div class="container">
<div class="row clearfix">
<div class="col-md-12 column">
<table class="table table-bordered table-hover" id="tab_logic">
<thead>
<tr >
<th class="text-center">
#
</th>
<th class="text-center">
Recruitment Stage
</th>
<th class="text-center">
Remark
</th>
<th class="text-center">
Comments
</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>
1
</td>
<td>
<select name="course0" class="form-control">
<option value="">Select</option>
<option value="1">Telephonic Interview</option>
<option value="2">Skype Interview</option>
<option value="3">Personal Interview</option>
</select>
</td>
<td>
<input type="text" name='mail0' placeholder='Mail' class="form-control"/>
</td>
<td>
<input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
</td>
</tr>
<tr id='addr1'></tr>
</tbody>
</table>
</div>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>




Answer

If you have multiple lines for a single statement in javascript you should use " at the end of each line and + " at the beginning of the next line (or vice versa). This is called concatenation

$(document).ready(function(){
      var i=1;
     $("#add_row").click(function(){
      $('#addr'+i).html("<td>"+ (i+1) +"</td><td>"
                          +"<select name='course"+i+"' class='form-control'>"
                             +"<option value=''>Select</option>"
                             +"<option value='1'>Telephonic Interview</option>"
                             +"<option value='2'>Skype Interview</option>"
                             +"<option value='3'>Personal Interview</option>"
                          +"</select>"
                        +"</td><td><input  name='mail"+i+"' type='text' placeholder='Mail'  class='form-control input-md'></td><td><input  name='mobile"+i+"' type='text' placeholder='Mobile'  class='form-control input-md'></td>");

      $('#tab_logic').append('<tr id="addr'+(i+1)+'"></tr>');
      i++; 
  });
     $("#delete_row").click(function(){
         if(i>1){
         $("#addr"+(i-1)).html('');
         i--;
         }
     });

});
#add_row, #delete_row
{
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="container">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <table class="table table-bordered table-hover" id="tab_logic">
                <thead>
                    <tr >
                        <th class="text-center">
                            #
                        </th>
                        <th class="text-center">
                            Recruitment Stage
                        </th>
                        <th class="text-center">
                            Remark
                        </th>
                        <th class="text-center">
                            Comments
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr id='addr0'>
                        <td>
                        1
                        </td>
                        <td>
                          <select name="course0" class="form-control">
                             <option value="">Select</option>
                             <option value="1">Telephonic Interview</option>
                             <option value="2">Skype Interview</option>
                             <option value="3">Personal Interview</option>
                          </select>
                        </td>
                        <td>
                        <input type="text" name='mail0' placeholder='Mail' class="form-control"/>
                        </td>
                        <td>
                        <input type="text" name='mobile0' placeholder='Mobile' class="form-control"/>
                        </td>
                    </tr>
                    <tr id='addr1'></tr>
                </tbody>
            </table>
        </div>
    </div>
    <a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>