Detailed explanation of the case of dynamically generating tables using JavaScript

Detailed explanation of the case of dynamically generating tables using JavaScript

Preface

Here is a case of dynamically adding a table. When you click the Add button, a form can pop up and then add the input content to the table, or you can clear the entire row in the table.

Implementation ideas

First create a table and a form, dynamically add the content entered in the form to the table. There is a close button in the upper right corner of the form page. When clicked, the form page can be closed and the table page can be displayed. In order to make the page beautiful, I put the button to add data in the <tfoot></tfoot> of the table, and added the dynamically generated table data to the <tbody><tbody>. When the Add button is clicked, the table is hidden and the form is displayed. The information to be added is filled in the form, and then the input information is obtained. A row of elements in the table is generated through jQuery, and the obtained values ​​are added. Finally, this row is added to the last row of <tbody><tbody>. When the Add button on the form page is clicked, the form is hidden and the modified changes are displayed. Because the dynamic deletion function is also required, a delete attribute (hyperlink) needs to be added to each row element in the table. When we click Delete, we get the corresponding row and perform the deletion operation.

Implementation Code

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        table {
            width: 410px;
            margin: 100px auto 0;
            text-align: center;
            border-collapse: collapse;
            border-spacing: 0;
            border: 1px solid #ccc;
        }
        th,
        td {
            width:150px;
            height: 40px;
            border: 1px solid #ccc;
            padding: 10px;
        }

        a{
            text-decoration: none;
        }
        .btnAdd {
            width: 110px;
            height: 30px;
            font-size: 20px;
        }
        .item {
            position: relative;
            padding-left: 100px;
            padding-right: 20px;
            margin-bottom: 34px;
        }

        .lb {
            position: absolute;
            left: 0;
            top: 0;
            display: block;
            width: 100px;
            text-align: right;
        }

       .txt {
            width: 300px;
            height: 32px;
        }
        .form-add {
            position: absolute;
            top: 100px;
            left: 578px;
            border: 1px solid #ccc;
            margin-left: -197px;
            padding-bottom: 20px;
            display: none;
        }
        .title {
            background-color: #f7f7f7;
            border-width: 1px 1px 0 1px;
            border-bottom: 0;
            margin-bottom: 15px;
            position: relative;
        }

        span {
            width: auto;
            height: 18px;
            font-size: 16px;
            color: rgb(102, 102, 102);
            text-indent: 12px;
            padding: 8px 0px 10px;
            margin-right: 10px;
            display: block;
            overflow: hidden;
            text-align: left;
        }

        .title div {
            width: 16px;
            height: 20px;
            position: absolute;
            right: 10px;
            top: 6px;
            font-size: 30px;
            line-height: 16px;
            cursor: pointer;
        }

        .submit {
            text-align: center;
        }

        .submit input {
            width: 170px;
            height: 32px;
        }
    </style>

</head>
<body>
    <!--Buttons and forms-->
        <table>
            <thead>
            <tr>
                <th>Class</th>
                <th>Name</th>
                <th>Student Number</th>
                <th>Operation</th>
            </tr>
            </thead>
            <tbody id="j_tb">
            <tr>
                <td>Class 1</td>
                <td>Xiao Wang</td>
                <td>001</td>
                <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Delete</a></td>
            </tr>
            <tr>
                <td>Class 2</td>
                <td>Little Bear</td>
                <td>002</td>
                <td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Delete</a></td>
            </tr>
            </tbody>
            <tfoot>
                <tr>
                    <td id="j_btnAddData" class="btnAdd" colspan="4">Add data</td>
                </tr>
            </tfoot>
        </table>
    <!--Form to add data-->
    <div id="j_formAdd" class="form-add">
        <div class="title">
            <span>Add data</span>
            <div id="j_hideFormAdd">×</div>
        </div>
        <div class="item">
            <label class="lb" for="">Class:</label>
            <input class="txt" type="text" id="classes" placeholder="Please enter the class">
        </div>
        <div class="item">
            <label class="lb" for="">Name:</label>
            <input class="txt" type="text" id="uname" placeholder="Please enter your name">
        </div>
        <div class="item">
            <label class="lb" for="">Student ID:</label>
            <input class="txt" type="text" id="order" placeholder="Please enter your student number">
        </div>
        <div class="submit">
            <input type="button" value="Add" id="j_btnAdd">
        </div>
    </div>
</body>
</html>

<script src="jquery.js"></script>
<script>
    $(function () {
        $('#j_btnAddData').click(function () {
            $('#j_formAdd').show();
            $('table').hide()
        });
        $('#j_hideFormAdd').click(function () {
            $('#j_formAdd').hide();
            $('table').show()
        });
        $('#j_btnAdd').click(function () {
            $('table').show()
            $('#j_formAdd').hide();
            var classes = $('#classes').val(); 
            var uname = $('#uname').val(); 
            var order = $('#order').val(); 
    
            var New =$('<tr>' +
                            '<td>'+classes+'</td>'+
                            '<td>'+uname+'</td>' +
                            '<td>'+order+'</td>' +
                            '<td><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" class="get">Delete</a></td>' +
                         '</tr>' );

            $('#j_tb').append(New);
        });
        $('#j_tb').on('click','.get', function () {
            $(this).parent().parent().remove();
        });
    });
</script> 

Achieve results

This is the end of this article about the detailed explanation of the case of dynamically generating tables using JavaScript. For more relevant content about dynamically generating tables using JavaScript, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope you will support 123WORDPRESS.COM in the future!

You may also be interested in:
  • Detailed explanation of dynamically generated tables using javascript
  • JavaScript to achieve dynamic table effect
  • JavaScript to implement a simple dynamic table
  • JavaScript to dynamically generate tables on web pages
  • Example of dynamically generating a table with JavaScript
  • JavaScript to dynamically generate tables
  • Complete example of dynamic operation of JS table

<<:  This article takes you to explore NULL in MySQL

>>:  Specific usage of CSS compound selectors

Recommend

Super detailed steps to install zabbix3.0 on centos7

Preface Recently, part of the company's busin...

Analysis of the difference between HTML relative path and absolute path

HTML beginners often encounter the problem of how ...

Detailed usage of kubernetes object Volume

Overview Volume is the abstraction and virtualiza...

How to make a website front end elegant and attractive to users

The temperament of a web front-end website is a fe...

Solution to ERROR 1366 when entering Chinese in MySQL

The following error occurs when entering Chinese ...

Use of JavaScript sleep function

Table of contents 1.sleep function 2. setTimeout ...

Shell script nginx automation script

This script can satisfy the operations of startin...

Zabbix monitoring solution - the latest official version 4.4 [recommended]

Zabbix 2019/10/12 Chenxin refer to https://www.za...

Solution to occasional crash of positioning background service on Linux

Problem Description In the recent background serv...

Complete steps to build a Laravel development environment using Docker

Preface In this article, we will use Docker to bu...

Detailed explanation of Vue lazyload picture lazy loading example

Documentation: https://github.com/hilongjw/vue-la...

Vue.js handles Icon icons through components

Icon icon processing solution The goal of this re...

WeChat Mini Program video barrage position random

This article shares the specific code for randomi...

CSS realizes the mask effect when the mouse moves to the image

1. Put the mask layer HTML code and the picture i...