Reputation: 1209
I'm trying to make a little program that uses generated (dynamically) tables, I will explain an example:
I have a blank page with only and input (number type) and a div:
<input id='numoftables' type='number'>
<div id='tablescontainer'></div>
I need create N tables with the following structure:
<table>
<tr>
<td>
<div style='text-align:left;'>
<h3>
<span class='label label-default'>Table #N</span>
</h3>
</div>
</td>
<td>
<input id='secondNum' type='number' class='form-control input-md' value='1'>
</td>
</tr>
</table>
<div class='table-responsive text-left'>
<table id='tableN' class='table table-striped condensed'>
<thead>
<tr>
<th>Col 1</th>
<th>Col 2</th>
<th>Col 3</th>
<th>Col 4</th>
<th>Col 5</th>
<th>Col 6</th>
</tr>
</thead>
<tbody>
<tr>
<td align='middle'>
<b>M</b>
</td>
<td>
<input type='number' class='form-control input-md'>
</td>
<td>
<input type='number' class='form-control input-md'>
</td>
<td>
<input type='number' class='form-control input-md'>
</td>
<td>
<div class='input-group date' id='fecha'>
<input id='fechainput' maxlength='10' data-date-format='DD/MM/YYYY' type='date' class='form-control' placeholder='Fecha DD/MM/AAAA' required>
<span class='input-group-addon'>
<span class='glyphicon glyphicon-calendar'></span>
</span>
</div>
</td>
<td align='middle'>
<img class='delete' src='img/delete.png' >
</td>
</tr>
</tbody>
</table>
</div>
<hr>
It's generate something similar of this (with setting a value of 3 on input with id 'numoftables'):
But I want to make dynamic elements (with dynamic id's), please see this:
Red boxes will have the dynamic number, 1 to N; N is the value of the input with id 'numoftables'.
Green boxes represents the numbers of rows (I call this number, M) of the tableN.
How can I to generate all of this dynamically :(?
I have a crazy code, like this:
$("#tablescontainer").html(null);
for (i=1;i<=$("#numoftable").val();i++)
{
$("#tablescontainer").append("<table><tr><td><div style='text-align:left;'><h3><span class='label label-default'>Table #N</span></h3></div></td><td style='position:relative;top:7px !important;left:8px;'><input id='secondNum' type='number' style='width:64px;' class='form-control input-md' value='1'></td></tr></table><div class='table-responsive text-left'><table id='tableN' class='table table-striped condensed'><thead><tr><th>Col 1</th><th>Col 2</th><th>Col 3</th><th>Col 4</th><th>Col 5</th><th>Col 6</th></tr></thead><tbody><tr><td align='middle'><b>M</b></td><td><input type='number' class='form-control input-md'></td><td><input type='number' class='form-control input-md'></td><td><input type='number' class='form-control input-md'></td><td><div class='input-group date' id='fecha'><input id='fechainput' maxlength='10' data-date-format='DD/MM/YYYY' type='date' class='form-control' placeholder='Fecha DD/MM/AAAA' required><span class='input-group-addon'><span class='glyphicon glyphicon-calendar'></span></span></div></td><td align='middle'><img width='20' class='delete' src='img/delete.png' ></td></tr></tbody></table></div><hr><script>$('#numcarr"+i+"').click(function(e){$('#tabla"+i+" > tbody:last').html(null);for (j=1;j<=$(\"#numcarr"+i+"\").val();j++){$('#tabla"+i+" > tbody:last').append('<tr><td align=\"middle\"><b>"+i+"</b></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><input min=\"1\" max=\"10\" id=\"numcaballos\" type=\"number\" class=\"form-control input-md\"></td><td><div class=\"input-group date\" id=\"fecha\"><input id=\"fechainput\" maxlength=\"10\" data-date-format=\"DD/MM/YYYY\" type=\"date\" class=\"form-control\" placeholder=\"Fecha DD/MM/AAAA\" required><span class=\"input-group-addon\"><span class=\"glyphicon glyphicon-calendar\"></span></span></div></td><td align=\"middle\"><img width=\"20\" class=\"delete\" onclick=\"$(this).parent().parent().remove()\" src=\"img/delete.png\"></td></tr>')}});</script>");
}
I don't know how can I solve this, write less code, make it dynamically :c Thanks!
Upvotes: 0
Views: 53
Reputation: 9583
see the result in by inspect the table and secondNum: jsfiddle
jQuery
$(function(){
$("#numoftables").on("change", function(){
$("#tablescontainer").html("");
var num = $(this).val();
var table = $("#copy").html();
for (var i=1; i <= num; i++){
var newTable = table.replace("secondNum", "id='secondNum"+i).replace("uniqueTable", "uniqueTable"+i);
$("#tablescontainer").append(newTable);
}
});
});
CSS
#copy{
display: none;
}
Now you have to do other things in the similar fashion, like showing the the table number. use a
different id
which may not use in the content and replace it in the jquery.
Upvotes: 1