kurama kurama - 1 year ago 67
Javascript Question

bootstrap : insert dynamically a row in tab

I try to insert this script inside a bootstrap tab .
My objective is to build a table dynamically.

My problem, every time I insert a new row my page is refreshed.

Do you have an idea to resolve this problem?

<table class="table table-sm table-hover" id="mtable">
<td>Some Item</td>
<td><input type="checkbox" /></td>
<td><input type="checkbox" /></td>
</table><br /><br />
<input id="row" placeholder="Enter Item Name" />
<button id="irow">Insert Row</button><br /><br />
<input id="col" placeholder="Enter Heading" />
<button id="icol">Insert Column</button>

$('#mtable tbody').append($("#mtable tbody tr:last").clone());
$('#mtable tbody tr:last :checkbox').attr('checked',false);
$('#mtable tbody tr:last td:first').html($('#row').val());
}else{alert('Enter Text');}
$('#mtable tr').append($("<td>"));
$('#mtable thead tr>td:last').html($('#col').val());
$('#mtable tbody tr').each(function(){$(this).children('td:last').append($('<input type="checkbox">'))});
}else{alert('Enter Text');}

Answer Source

It sounds like this is inside a form.

Change <button> to <button type='button'> to prevent it submitting form.

The default type for <button> is submit so the refresh would be due to form submitting.

If it isn't form related you will need to create a demo that reproduces the problem

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download