table form, html code is as follows:
to achieve the effect, as shown:
First, the establishment of an array of objects, array initialization information
Second, the definition function to generate the page - setTab
. 1) defined variable assigned an empty string, the role of the splice storage tables generated content tag
2 ) arr loop through the array, according to the contents of the array, table of contents generation parameter table 1, parameter 2
parameter 1: storing data values, i.e. the object
2, the data stored in the index parameter is the index corresponding to the object
① splicing start tag tr
② splicing sequence number cell content object unit corresponding to the index is incremented by 1 parameter 2 + 1
③ loop through the object that is the parameters a
splicing contents of a cell, is an object-specific data
acquired by the properties of the object
④ splicing delete cells, button button content
to button button, add custom attribute, the attribute value is an index of the object, i.e. the parameters. 1
⑤, tr splicing end tag
3) spliced string written to the page of the write word to tbody string content
4) to call the delete function tbody has been generated button delete button binding events, add and delete effect
Third, access to objects and labels set Data - Get tbody tag objects Add button and the button object
// Get the tbody tag table, assignment directly manipulated variable
var oBody = document.querySelector ( 'tbody');
// get the name = "add" button of the tag
var oBtn = document.querySelector ( '[name = "add"] ');
Fourth, the data add operation - to add a button tag, add a click event
1, to obtain parameters for all data labels
2. The data defined as an object in the form of result objects than the same data structure array, that is, to get before the tag data parameters
3. the object is written to the array, arr.push (objects)
4. the new array, re-render the page, re-calling function setTab ();
five or delete function defined functions del
1) get all the delete the label, the result is a pseudo-array
2) loops through the pseudo-array forEach ()
parameter 1: label object, that is, delete button button
parameter 2: label corresponds to the corresponding index index (no)
to the label parameter 1 to add a click event, click the tab to obtain custom property, the property value, the value of this property is the object to be deleted, the index in the array, according to the index, delete the unit from the array, arr.splice (index 1), according to a new array, rendering generate a new table form again, setTab ()
Note: the function to generate the page, setTab () function, call del function, the position must be oTb.innerHTML = str after the code, oTb.innerHTML = str The line is to be written to the tag tbody in, after the execution, tbody only content only delete button button
