JSFiddle - React, Tailwind, and code Playground
HTML
<table class='gridcontainer' border='1'>
<tr class='gridheader'>
<td span=0>lineNo</td>
<td span=0>txtLink</td>
<td span=0>txtCheck</td>
<td span=0>txtSelect</td>
<td span=0>addRow</td>
<td span=0>delRow</td>
</tr>
<tr class='gridrow'>
<td><div class='gridvalue'><input type="text" id="lineNo" name="lineNo" value=""></div></td>
<td><div class='gridvalue'><input type="file" id="txtLink" name="txtLink"></div></td>
<td><div class='gridvalue'><input type="checkbox" id="txtCheck" name="txtCheck"></div></td>
<td><div class='gridvalue'><select id="txtSelect">Select<option>First</option><option>Second</option></select></div></td>
<td><div class='btn'><button class='addrow'>Add Row</button></div></td>
<td><div class='btn'><button class='delrow'>Del Row</button></div></td>
</tr>
</table>
CSS
.gridcontainer {
float: left;
border: 1px solid red;
}
.gridheader {
font-weight: bold;
white-space: nowrap;
text-align: center;
}
.gridvalue {
margin: 0px;
padding: 0px;
text-align: center;
float: left;
}
.btn {
clear:both;
}
JavaScript
//<![CDATA[
$(document).ready(function() {
var emptyItems = $(".gridrow:first").clone();
$(".addrow").live('click', function(e) {
e.preventDefault();
$(this).parents('.gridcontainer').append(emptyItems.clone());
refreshTable();
});
$(".delrow").live('click', function(e) {
e.preventDefault();
$(this).parents('.gridrow').remove();
refreshTable();
});
refreshTable();
function refreshTable(){
$(".gridrow:first .delrow").hide();
var autonumber = function() {
$("tr.gridrow").each(function(i) {
$(this).find("input[name='lineNo']").val(i + 1);
});
};
autonumber();
}
})
//]]>