I have some PHP code that creates the following table on a page, which is shown here:
echo '<table class="table" id="structures' . $i . '">';
echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td></tr>';
echo '<tr>';
if($draw_hyp == 1){
echo '<td class="s_td"><input class="s_input" type="text" class="structure" placeholder="problem statement" name="hyp" id="hypo" /></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td>';
}else{
echo '<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td>';
}
echo '</tr>';
echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td></tr>';
echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' . $i . '">Add</a></td></tr>';
echo '</table>';
Then I have some js which allow the user to add additional rows to the table, which is shown here:
$( "body" ).on( "click", ".add_sub_bucket", function(e) {
e.preventDefault();
var currentId = $(this).attr('id');
$('#structures' + currentId).append('<tr><td class="s_td"></td>' +
'<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' + currentId + '[]"></td></tr>' +
/*'<a href="#" class="remove_sub_bucket">x</a></td></tr>' + */
'<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' + currentId + '">Add</a></td></tr>'
);
$(this).remove();
});
The js successfully adds the rows, but each additional row added appears to have double the spacing around it. The HTML from the initial PHP and the js reference the same .css file so I'm a bit puzzled as to why I get the extra spacing between rows from the js.
And here is rendered HTML of the table created by PHP code:
<form role="form" method="POST" id="inputStructure">
<table class="table" id="structures0">
<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
<tr><td class="s_td"></td><td class="s_td"><a href="#" class="add_bucket" id="0">Add</a></td><td class="s_td"><a href="#" class="add_sub_bucket" id="0">Add</a></td></tr>
</table>
Any pointers in the right direction would be much appreciated!
In your fiddle, you remove the "add" link, not the row containing the link, so you retrieve an empty row, that is your "double" space. Better to see, if you give the table a border.
$( "body" ).on( "click", ".add_sub_bucket", function(e) {
e.preventDefault();
var currentId = $(this).attr('id');
$('#structures' + currentId).append('<tr><td class="s_td"></td>' +
'<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' + currentId + '[]"></td></tr>' +
/*'<a href="#" class="remove_sub_bucket">x</a></td></tr>' + */
'<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' + currentId + '">Add</a></td></tr>'
);
// this is the link not the row, you could do the following instead
// $(this).remove();
$(this).closest('tr').remove();
});
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments