Skip to content

Instantly share code, notes, and snippets.

@gmolveau
Created December 15, 2020 07:09
Show Gist options
  • Select an option

  • Save gmolveau/bb6811f4ee38b7500cad59486fc82351 to your computer and use it in GitHub Desktop.

Select an option

Save gmolveau/bb6811f4ee38b7500cad59486fc82351 to your computer and use it in GitHub Desktop.
crud html js jquery
<!DOCTYPE html>
<html>
<head>
<title>crud</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="jquery.min.js"></script>
</head>
<body>
<div id="1">
<table>
<thead>
<tr>
<th>The table header</th>
<th><input type="button" onclick="add_row();" value="+"></th>
</tr>
</thead>
<tbody>
<tr>
<td><input value="ok1"></td>
<td><input type="button" onclick="delete_row(this);" value="x"></td>
</tr>
</tbody>
</table>
</div>
<hr>
<div id="2">
<table>
<thead>
<tr>
<th colspan="2">The table header</th>
</tr>
</thead>
<tbody>
<tr>
<td><input value="ok2"></td>
<td><input value="pk2"></td>
</tr>
</tbody>
</table>
</div>
</body>
<script type="text/javascript">
function add_row() {
$("#1 > table > tbody").append(
"<tr>"+
"<td><input type='text'/></td>"+
"<td><input type='button' class='remove' onclick='delete_row(this);' value='x'></td>"+
"</tr>"
);
}
function delete_row(ctl) {
$(ctl).parents("tr").remove()
}
function reset() {
$("#1 > table > tbody").empty();
}
</script>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment