Shulou(Shulou.com)05/31 Report--

This article introduces the knowledge of "how to delete rows in table in javascript". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

The implementation method of table delete row in javascript: first create a HTML sample file; then define a table table; finally, through the "function deleteRow (_ this) {...}" method to achieve the function of deleting row.

This article operating environment: windows7 system, javascript1.8.5 version, DELL G3 computer

How do I delete a line from table in javascript?

JavaScript dynamically adds and deletes rows for table

I have written a total of three methods to achieve the function of adding lines, and a way to delete lines. The main feeling is that you must be familiar with JavaScript's API. In fact, these things are all found in API documents, depending on whether you know that JavaScript has this function or attribute, and then integrate these attributes and functions is what you want.

Common functions available to all HTML elements: node.appendChild (node),

A common attribute that all HTML elements can use: element.tagName

Common method of document object: document.createElement (name)

Common functions in: tableObject.insertRow (index), tableObject.deleteRow (index)

Common properties in: tableObject.rows, tableObject.rows.length

Common function in: tablerowObject.insertCell (index)

Common attribute in: tablerowObject.rowIndex

Table {border:1px solid # 000; border-collapse: collapse;} th,td {border:1px solid # 000; padding:6px;} function addRow1 () {var userInfo = document.getElementById ("userInfo"); var row = document.createElement ("tr"); var td1 = document.createElement ("td"); TD1 [XSS _ clean] = "Li Si" Var td2 = document.createElement ("td"); td2 [XSS _ clean] = "102"; var td3 = document.createElement (" td "); td3 [XSS _ clean] =" Beihai "; var td4 = document.createElement (" td "); td4 [XSS _ clean] =" delete "; row.appendChild (td1); row.appendChild (td2); row.appendChild (td3) Row.appendChild (td4); userInfo.appendChild (row);} function addRow2 () {var userInfo = document.getElementById ("userInfo"); var rowLength = userInfo.rows.length; / / the new line will be inserted before the index line. If index equals the number of rows in the table, the new row is appended to the end of the table. / / returns a TableRow that represents the newly inserted row. Var tableRow = userInfo.insertRow (rowLength); tableRows [XSS _ clean] = "four Seas deletion of Li Si 102";} function addRow3 () {var userInfo = document.getElementById ("userInfo"); / / the header is included when calculating rows.length var rowLength = userInfo.rows.length; var tableRow = userInfo.insertRow (rowLength) / / the new cell will be inserted before the table cell currently at the location specified by index / / if the index is equal to the number of cells in the row, the new cell is appended to the end of the row. Var tableCell0 = tableRow.insertCell (0); var tableCell1 = tableRow.insertCell (1); var tableCell2 = tableRow.insertCell (2); var tableCell3 = tableRow.insertCell (3); TableCell0 [XSS _ clean] = "Li Si"; TableCell1 [XSS _ clean] = "103"; TableCell2 [XSS _ clean] = "Black Sea"; tableCell3 [XSS _ clean] = "delete" } / / the rowIndex of the current element's line at initialization cannot be passed, because after the delete operation, the rowIndex of the current element's line will send a change function deleteRow (_ this) {var userInfo = document.getElementById ("userInfo"); var rowIndex = getTrIndex (_ this) The / / deleteRow () method is used to delete the row at the specified location from the table / / the parameter index specifies the position of the row to be deleted in the table userInfo.deleteRow (rowIndex);} function getTrIndex (element) {if (element.tagName.toLowerCase () = = "tr") {/ / rowIndex property returns the position of a row in the rowset of the table (row index) return element.rowIndex } else {return getTrIndex (Element [XSS _ clean]);}} "how to delete rows in table in javascript" ends here. Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.