Adding or Deleting Rows from Input Table

Question

Adding or Deleting Rows from Input Table

I'm in the process of creating a website that features an input table allowing users to easily add or remove rows at their discretion. The desired UI is shown below:

https://i.sstatic.net/EFAlM.jpg

Here is the HTML code I have developed so far:

<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>

I am currently seeking guidance on how to effectively implement functionalities for the 'Add row', 'Delete last row' buttons, and the ability to remove rows. These functions should also seamlessly integrate with back-end data processing using Django and MongoDB. Any suggestions on implementing these using frontend JavaScript or handling them dynamically on the backend would be greatly appreciated.

javascript html css bootstrap-4

Answer 1

Answer №1

It appears that your question is quite complex and may need to be divided into multiple smaller questions. One approach to deleting rows is by creating a button for users to click on instead of the current method. Additionally, you will need to implement an ajax call to remove the corresponding data from your database. The code provided below is purely for the front-end to visually indicate that 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>Phone 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>

Answer 2

It appears that your question is quite complex and may need to be divided into multiple smaller questions. One approach to deleting rows is by creating a button for users to click on instead of the current method. Additionally, you will need to implement an ajax call to remove the corresponding data from your database. The code provided below is purely for the front-end to visually indicate that 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>Phone 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>

Answer 3

Answer №2

If you need the ability to add and delete rows dynamically in a table, you can achieve this through dynamic table creation.

For a demo, you can visit the following link: https://jsbin.com/pewexibole/edit?html,js,console,output

Here is the HTML code snippet:

<!-- HTML code for creating dynamic input table with row adding option -->
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <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>Phone 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>

And here is the JavaScript code snippet:

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++;
}

Answer 4

If you need the ability to add and delete rows dynamically in a table, you can achieve this through dynamic table creation.

For a demo, you can visit the following link: https://jsbin.com/pewexibole/edit?html,js,console,output

Here is the HTML code snippet:

<!-- HTML code for creating dynamic input table with row adding option -->
<head>
    <title></title>

    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js"></script>

    <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>Phone 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>

And here is the JavaScript code snippet:

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++;
}

Adding or Deleting Rows from Input Table

Answer №1

Answer №2

Similar questions

Execute sequential animations on numerous elements without using timeouts

Executing an AngularJS function using regular JavaScript code

Converting Blob to File in Electron: A step-by-step guide

The issue of the Dropdown Menu Not Remaining Fixed While Scrolling

Use the JavaScript executor to combine a dynamic string

Unable to locate node module when using Npm.require

Utilizing dynamically assigned ng directives in my unique custom directive

When converting to HTML, LibreOffice Writer fails to display footers on even-numbered pages

I am having trouble running the code, PHP seems to be operational as I have tested it with sample PHP code. Can anyone help decipher? I have shared the PHP and HTML code for reference

Error: The connection with mssql in nodejs has been unexpectedly terminated due to a read ECONNRESET issue

What is the best way to eliminate the ' from every element in an array in this situation?

Looking for assistance with implementing touch gestures on an HTML website?

Creating a mobile-friendly split column layout with Bootstrap 5

Trouble with Sound during Quickblox Webrtc Audio Calls

What is the best way to navigate back to the top of the page once a link has been clicked?

Locate the Next Element Based on its Tag Name

Displaying database values in an array within an HTML format

Can Python be used to personalize a bootstrap template?

Save the content of a string object into an array

Utilize middleware in a separate controller file to handle specific tasks within an Express application