"Dynamic Table row creation and Deletion"
Bootstrap 3.3.0 Snippet by rogerlew

<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <h1>The Kauffman Project Connector</h1> <div class="container instructions"> <h2>Instructions</h2> <p> Think as broadly as you can - this effort will need great people from various walks of life and with different skills and abilities. Think of people you personally know and trust who are great thinkers, innovators, doers, trustees, etc. </p> <p> Think of people from various <AREA NAME> communities, walks of life, job categories, classes, income levels, genders, religions, races, ethnic groups, and age groups. Please do not name members of your family. Please type in a name following each question and include an email address for the leaders you name. If someone you name does not have email, please include a telephone number for the individual. We want to ask them to participate in this study, too. </p> <p> All names and contact information will be held in strictest confidence and will be used only to complete this study. Thank you for participating. (If you don’t personally know someone who fits in any of the following questions, please leave that question blank.) </p> </div> <form action="http://posttestserver.com/post.php" method="post" > <div class="container"> <h3>Question 1: Who do you consider to be particularly innovative; who could bring “big-picture” ideas to this effort?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic0"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr0_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr0_1'></tr> </tbody> </table> </div> </div> <a id="add_row0" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 2: Who do you think has the expertise or expert knowledge to turn great ideas into reality?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic1"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr1_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr1_1'></tr> </tbody> </table> </div> </div> <a id="add_row1" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 3: Who do you know who has the integrity, concern for the common good, and guts to help get this done?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic2"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr2_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr2_1'></tr> </tbody> </table> </div> </div> <a id="add_row2" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 4: Who do you consider to be an effective implementer? Who would roll up his or her sleeves and see this work through with you to the end?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic3"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr3_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr3_1'></tr> </tbody> </table> </div> </div> <a id="add_row3" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 5: Who could you depend on to help bring together and wisely coordinate the area’s resources to meet this challenge?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic4"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr4_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr4_1'></tr> </tbody> </table> </div> </div> <a id="add_row4" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 6: Who in your own neighborhood or local community could you depend on to help make your neighborhood or community the best in the world?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic5"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr5_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr5_1'></tr> </tbody> </table> </div> </div> <a id="add_row5" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Question 7: Imagine that you need advice about an important issue. Who outside of your own race, class, social circle, gender, religion, age group, etc., would you consult?</h3> <div class="row clearfix"> <div class="col-md-12 column"> <table class="table table-bordered table-hover" id="tab_logic6"> <thead> <tr > <th class="text-center"> # </th> <th class="text-center"> Name </th> <th class="text-center"> Organization </th> <th class="text-center"> Email </th> <th class="text-center"> Phone (optional) </th> <th class="text-center"> </th> </tr> </thead> <tbody> <tr id='addr6_0'> <td> 1 </td> <td> <input type="text" name='name0' placeholder='Name' class="form-control"/> </td> <td> <input type="text" name='org0' placeholder='Organization' class="form-control"/> </td> <td> <input type="text" name='mail0' placeholder='Email' class="form-control"/> </td> <td> <input type="text" name='phone0' placeholder='Phone' class="form-control"/> </td> <td>    <a id='delete_row' class="btn btn-default">Delete Row</a> </td> </tr> <tr id='addr6_1'></tr> </tbody> </table> </div> </div> <a id="add_row6" class="btn btn-default pull-left">Add Row</a> </div> <div class="container"> <h3>Please tell us about yourself?</h3> </tr> <tr> <td valign="top"> <label for="first_name">First Name</label> </td> <td valign="top"> <input type="text" name="participant_first_name" class="form-control" style="width: 300px;"> </td> </tr> <tr> <td valign="top"> <label for="last_name">Last Name</label> </td> <td valign="top"> <input type="text" name="participant_last_name" class="form-control" style="width: 300px;"> </td> </tr> <tr> <td valign="top"> <label for="email">Email Address</label> </td> <td valign="top"> <input type="text" name="participant_email" class="form-control" style="width: 300px;"> </td> </tr> <tr> <td valign="top"> <label for="telephone">Phone (Optional)</label> </td> <td valign="top"> <input type="text" name="participant_phone" class="form-control" style="width: 300px;"> </td> </tr> </table> </div> <div class="container"> <br/> <h3>Please review your recommendations before submitting.</h3> <a id='submit' class="btn btn-default">Submit Your recommendations to the Connector</a><br/><br/> </div> </form>
h1 { text-align: center; } div.instructions {background:#dddddd;}
$(document).ready(function(){ // Q1 var i0=1; $("#add_row0").click(function(){ $('#addr0_'+i0).html("<td>"+ (i0+1) +"</td>" + "<td><input name='name"+i0+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i0+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i0+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i0+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic0').append('<tr id="addr0_'+(i0+1)+'"></tr>'); i0++; }); //Q2 var i1=1; $("#add_row1").click(function(){ $('#addr1_'+i1).html("<td>"+ (i1+1) +"</td>" + "<td><input name='name"+i1+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i1+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i1+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i1+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic1').append('<tr id="addr1_'+(i1+1)+'"></tr>'); i1++; }); //Q3 var i2=1; $("#add_row2").click(function(){ $('#addr2_'+i2).html("<td>"+ (i2+1) +"</td>" + "<td><input name='name"+i2+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i2+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i2+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i2+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic2').append('<tr id="addr2_'+(i2+1)+'"></tr>'); i2++; }); //Q4 var i3=1; $("#add_row3").click(function(){ $('#addr3_'+i3).html("<td>"+ (i3+1) +"</td>" + "<td><input name='name"+i3+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i3+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i3+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i3+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic3').append('<tr id="addr3_'+(i3+1)+'"></tr>'); i3++; }); //Q5 var i4=1; $("#add_row4").click(function(){ $('#addr4_'+i4).html("<td>"+ (i4+1) +"</td>" + "<td><input name='name"+i4+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i4+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i4+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i4+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic4').append('<tr id="addr4_'+(i4+1)+'"></tr>'); i4++; }); //Q6 var i5=1; $("#add_row5").click(function(){ $('#addr5_'+i5).html("<td>"+ (i5+1) +"</td>" + "<td><input name='name"+i5+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i5+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i5+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i5+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic5').append('<tr id="addr5_'+(i5+1)+'"></tr>'); i5++; }); //Q7 var i6=1; $("#add_row6").click(function(){ $('#addr6_'+i6).html("<td>"+ (i6+1) +"</td>" + "<td><input name='name"+i6+"' type='text' placeholder='Name' class='form-control input-md' /></td>" + "<td><input name='org"+i6+"' type='text' placeholder='Organization' class='form-control input-md'></td>" + "<td><input name='email"+i6+"' type='text' placeholder='Email' class='form-control input-md'></td>" + "<td><input name='phone"+i6+"' type='text' placeholder='Phone' class='form-control input-md'></td>" + "<td>    <a id='delete_row' class='btn btn-default'>Delete Row</a></td>"); $('#tab_logic6').append('<tr id="addr6_'+(i6+1)+'"></tr>'); i6++; }); $("#delete_row").click(function(){ $(this).closest("tr").html(''); //$("#addr"+(i-1)).html(''); }); });

Related: See More


Questions / Comments: