Shulou(Shulou.com)06/02 Report--

This article is about how JavaScript can generate tables dynamically. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Preface

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

Realization idea

First create a table and a form, dynamically add the input in the form to the table, and there is a close button in the upper right corner of the form page. when clicked, you can close the form page and display the form page. In order to make the page beautiful, I put the button to add data in the table, add the dynamically generated table data to the table, when the add button is clicked, hide the table and display the form, fill in the information to be added in the form, then get the input information, generate a row of elements of the table through jquery, and add the obtained value, and finally add this row to the last row When you click the add button on the form page, let the form hide and show the modified changes, because you also need to achieve dynamic deletion, so you need to add a delete attribute to each row of elements in the table (hyperlink). When we click delete, get the corresponding row and delete it.

Implementation code * {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 } Class name, student number, Operation Class 1, Xiao Wang 001 Delete Class 2 Bear 002 delete add data Add data × Class: name: student number: $(function () {) $('# jaccounbtnAddData') .click (function () {$('# jtemporformAdd') .show () $('table'). Hide ()}); $(' # table' form form add'). Click (function () {$('# jobsformAdd'). Hide (); $('table'). Form ()}) Hide (); var classes = $('# classes') .val (); var uname = $('# uname') .val (); var order = $('# order') .val () Var New = $('+'+ classes+''+''+ uname+'' +''+ order+'' + 'delete' +') On ('click','.get', function () {$(this). Parent (). Parent (). Append ();}); implementation effect

Thank you for reading! This is the end of the article on "how to dynamically generate tables in JavaScript". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it out for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.