| line | content | delete |
|---|
<style>
table {
border-collapse: collapse;
}
th,td{ border: 3px solid #B0B0B0;
padding: 10px;
background-color: #F8F8F8 ;
width: 100px;
}
</style>
<script type="text/javascript">
$( document ).ready(function() {
var counter = 1;
// add row
$( "#addRow" ).on( "click", function() {
textToInsert = '<tr class="deleteRow" ><td>'+ counter++ +'</td><td>some content<td><img src="img/delete.png"></a></td></tr>';
$('#myTable').append(textToInsert);
});
// delete row
$('#myTable').on('click', '.deleteRow', function(evt) {
var x = $("tr").index(this) + 1;
$("table#myTable tr:nth-child("+x+")").remove();
});
});
</script>
</head>
<body>
<h4>Adding and deleting rows from a table</h4>
<br>
<input id='addRow' type=button value="Add row to table">
<br/><br/>
<table id='myTable'>
<th> line </th><th> content </th><th> delete </th>
</table>