1

I am trying to design a webpage with an input table where users can add or remove rows as they want. UI like this-

enter image description here

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.

2
  • 1
    Can you make your code a runnable snippet? If so, I'll update my answer to make it more useful to you. Dec 23, 2020 at 6:12
  • yeah, thanks for the suggestion, it is done Dec 23, 2020 at 6:39

2 Answers 2

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>

2
  • Thanks a lot, it can perfectly visually remove any cell. But how can I add a cell also? Dec 23, 2020 at 6:40
  • And also I try to avoid ajax as I am not so good at asynchronous backend development. Isn't there any easier way to do this? Dec 23, 2020 at 6:42
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++;
}
3
  • thanks a lot, Ity works perfectly, now I have just one question; To access is inputted data from the backend, by which name I should call it? Dec 23, 2020 at 7:29
  • 1
    I don't get your question, do you want to get the data from the rows and want to send it to backend? Dec 23, 2020 at 7:39
  • yes, how can I send all the data in the backend? normally I use to send data by post method and receive them by their name in Django. Here maybe each field content array. how can I actually access them from the backend? Dec 23, 2020 at 8:03

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.