问题
I am trying to design a webpage with an input table where users can add or remove rows as they want. UI like this-
And here is my html code:
<div class="container my-5">
<h2>Welcome to dynamic input table with row adding option</h2>
<form method="" action="">
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>Pnone Number</th>
<th>Email</th>
<th>Remove?</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="name-1"></td>
<td><input type="text" name="phone-1"></td>
<td><input type="text" name="Email-1"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="name-2"></td>
<td><input type="text" name="phone-2"></td>
<td><input type="text" name="Email-2"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="name-3"></td>
<td><input type="text" name="phone-3"></td>
<td><input type="text" name="Email-3"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="name-4"></td>
<td><input type="text" name="phone-4"></td>
<td><input type="text" name="Email-4"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
</tbody>
</table>
<div class="row m-0">
<button class="btn btn-warning">Add row</button>
<button class="btn btn-danger ml-3">Delete last row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
</div>
<head>
<title></title>
<!-- media query support -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- font awsome css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>Now my problem is how can I implement the functionality of Add row button, Delete last row button, and the remove. And all should work in such a way that I can use this for data sending in the backend also. I will prefer to use Django and MongoDB to implement my backend. Now please help me with the best way to implement this, If it can implement with js in the frontend with js it will be very helpful for me, or if it should implement in the backend with the dynamic approach it will work also.
回答1:
You can create your table dynamically, if you want to do operations like add and delete.
You can check out the demo here: https://jsbin.com/pewexibole/edit?html,js,console,output
HTML:
<head>
<title></title>
<!-- media query support -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>
<!-- font awsome css link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<div class="container my-5">
<h2>Welcome to dynamic input table with row adding option</h2>
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>Pnone Number</th>
<th>Email</th>
<th>Remove?</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
<div class="row m-0">
<button class="btn btn-warning" onclick="addRow()">Add row</button>
<button class="btn btn-danger ml-3">Delete last row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</div>
JS:
let i = 0;
function rowTemplate(i) {
return `<tr data-index=${i}>
<td>${i}</td>
<td><input type="text" name="name-${i}"></td>
<td><input type="text" name="phone-${i}"></td>
<td><input type="text" name="Email-${i}"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;" onclick="removeRow(${i})"></i></td>
</tr>`
}
for (i = 0; i < 4; i ++) {
$('tbody').append(rowTemplate(i));
}
function removeRow(i) {
$("tbody").find(`tr[data-index='${i}']`).remove();
}
function addRow() {
$('tbody').append(rowTemplate(i));
i++;
}
回答2:
Your question has many parts and should be broken down into several questions. Here's a simple way to delete rows. You'll want to make button to click on instead of what I've done here. And, you'll also want to make an ajax call to delete the actual data in your database. This is just front-end code to visually show the user a row has been deleted.
$('.my-5 tr').click(function(){
$(this).remove();
return false;
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container my-5">
<h2>Welcome to dynamic input table with row adding option</h2>
<form method="" action="">
<table class="table table-hover my-5">
<thead class="">
<tr>
<th>No</th>
<th>Name</th>
<th>Pnone Number</th>
<th>Email</th>
<th>Remove?</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td><input type="text" name="name-1"></td>
<td><input type="text" name="phone-1"></td>
<td><input type="text" name="Email-1"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>2</td>
<td><input type="text" name="name-2"></td>
<td><input type="text" name="phone-2"></td>
<td><input type="text" name="Email-2"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>3</td>
<td><input type="text" name="name-3"></td>
<td><input type="text" name="phone-3"></td>
<td><input type="text" name="Email-3"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
<tr>
<td>4</td>
<td><input type="text" name="name-4"></td>
<td><input type="text" name="phone-4"></td>
<td><input type="text" name="Email-4"></td>
<td><i class="fa fa-times-circle" style="font-size: 22px; color: red;"></i></td>
</tr>
</tbody>
</table>
<div class="row m-0">
<button class="btn btn-warning">Add row</button>
<button class="btn btn-danger ml-3">Delete last row</button>
<button type="Submit" class="btn btn-primary ml-auto">Submit</button>
</div>
</form>
</div>来源：https://stackoverflow.com/questions/65419407/add-or-remove-row-in-input-table