Главная » Языки программирования

Html adding rows to table

Содержание
  1. Add/Delete table rows dynamically using JavaScript
  2. Easy Javascript Add more Rows with delete functionality
  3. how to dynamically add rows to table using html, css and javascript
  4. Prerequisite
  5. Html
  6. CSS
  7. JavaScript
  8. Conclusion
  9. Table insertRow() Method
  10. Browser Support
  11. Syntax
  12. Parameter Values
  13. Technical Details
  14. More Examples
  15. Example
  16. Related Pages
  17. COLOR PICKER
  18. Report Error
  19. Thank You For Helping Us!

Add/Delete table rows dynamically using JavaScript

You could just clone the first row that has the inputs, then get the nested inputs and update their ID to add the row number (and do the same with the first cell).

function deleteRow(row) < var i=row.parentNode.parentNode.rowIndex; document.getElementById('POITable').deleteRow(i); >function insRow() < var x=document.getElementById('POITable'); // deep clone the targeted row var new_row = x.rows[1].cloneNode(true); // get the total number of rows var len = x.rows.length; // set the innerHTML of the first row new_row.cells[0].innerHTML = len; // grab the input from the first cell and update its ID and value var inp1 = new_row.cells[1].getElementsByTagName('input')[0]; inp1.id += len; inp1.value = ''; // grab the input from the first cell and update its ID and value var inp2 = new_row.cells[2].getElementsByTagName('input')[0]; inp2.id += len; inp2.value = ''; // append the new row to the table x.appendChild( new_row ); >
function deleteRow(row) < var i = row.parentNode.parentNode.rowIndex; document.getElementById('POITable').deleteRow(i); >function insRow()
 
 
 
 
POI Latitude Longitude Delete? Add Rows? 
 
1

@Pow: You’re welcome. I put together another example. This one places your header row in a element, and the rest in a element. Additionally, I updated to code to update the row numbers and IDs when deleting a row, and moved some of the code into its own function.

I have one more concern. What if I don’t have any created row? Suppose I want to do the exact same thing. But the 2nd row (that is being cloned) does not exist initially.

Читайте также:  Динамическое изменение таблицы html

@Pow: Using the example in my comment above, change the line that makes an initial clone from the first row to this: clone = tbody.removeChild(tbody.rows[0]); . So you’d send that row from the server, and remove it right away, storing it in clone . Then create another button that will add that initial row. It could be that you’d just want a single button outside the table for adding rows anyway since there’s not much reason to have the same button repeating over and over in the table.

Easy Javascript Add more Rows with delete functionality

       
Enter Title

This seems a lot cleaner than the answer above.

 var maxID = 0; function getTemplateRow() < var x = document.getElementById("templateRow").cloneNode(true); x.id = ""; x.style.display = ""; x.innerHTML = x.innerHTML.replace(//, ++maxID); return x; > function addRow() 
 
id name

@BradLaney Why learning jQuery for something like this? I don’t have nothing against jQuery but, so much people relies on jQuery for so simple things which can be done using pure JS. For few years people will forgot about, even, basics of JS.

If you put a delete button on each row, then:

And the deleteRow function can be:

function deleteRow(el) < // while there are parents, keep going until reach TR while (el.parentNode && el.tagName.toLowerCase() != 'tr') < el = el.parentNode; >// If el has a parentNode it must be a TR, so delete it // Don't delte if only 3 rows left in table if (el.parentNode && el.parentNode.rows.length > 3) < el.parentNode.removeChild(el); >>

If all your rows have the same content, it will be much faster to add a row by cloning an existing row:

function addRow(tableID) < var table = document.getElementById(tableID); if (!table) return; var newRow = table.rows[1].cloneNode(true); // Now get the inputs and modify their names var inputs = newRow.getElementsByTagName('input'); for (var i=0, iLen=inputs.length; i// Add the new row to the tBody (required for IE) var tBody = table.tBodies[0]; tBody.insertBefore(newRow, tBody.lastChild); >

You can add a row to a table in the most easiest way like this :-

I found this as an easiest way to add row . The awesome thing about this is that it doesn’t change the already present table contents even if it contains input elements .

row = ` ` $("#table_body tr:last").after(row) ;

Here #table_body is the id of the table body tag .

1 & 2: innerHTML can take HTML as well as text. You could do something like:

May or may not be the best way to do it, but you could do it that way.

3: I would just use a global variable that holds the number of POIs and increment/decrement it each time.

Here Is full code with HTML,CSS and JS.

 body < background-color: #efefef; color: #3a3a3a; >a, a:visited < color: #1e73be; >a:hover, a:focus, a:active < color: #000000; >body .grid-container < max-width: 1200px; >body, button, input, select, textarea < font-family: "Open Sans", sans-serif; >.entry-content>[class*="wp-block-"]:not(:last-child) < margin-bottom: 1.5em; >.main-navigation .main-nav ul ul li a < font-size: 14px; >@media (max-width:768px) < .main-title < font-size: 30px; >h1 < font-size: 30px; >h2 < font-size: 25px; >> .top-bar < background-color: #636363; color: #ffffff; >.top-bar a, .top-bar a:visited < color: #ffffff; >.top-bar a:hover < color: #303030; >.site-header < background-color: #ffffff; color: #3a3a3a; >.site-header a, .site-header a:visited < color: #3a3a3a; >.main-title a, .main-title a:hover, .main-title a:visited < color: #222222; >.site-description < color: #757575; >.main-navigation, .main-navigation ul ul < background-color: #222222; >.main-navigation .main-nav ul li a, .menu-toggle < color: #ffffff; >.main-navigation .main-nav ul li:hover>a, .main-navigation .main-nav ul li:focus>a, .main-navigation .main-nav ul li.sfHover>a < color: #ffffff; background-color: #3f3f3f; >button.menu-toggle:hover, button.menu-toggle:focus, .main-navigation .mobile-bar-items a, .main-navigation .mobile-bar-items a:hover, .main-navigation .mobile-bar-items a:focus < color: #ffffff; >.main-navigation .main-nav ul li[class*="current-menu-"]>a < color: #ffffff; background-color: #3f3f3f; >.main-navigation .main-nav ul li[class*="current-menu-"]>a:hover, .main-navigation .main-nav ul li[class*="current-menu-"] .sfHover>a < color: #ffffff; background-color: #3f3f3f; >.navigation-search input[type="search"], .navigation-search input[type="search"]:active < color: #3f3f3f; background-color: #3f3f3f; >.navigation-search input[type="search"]:focus < color: #ffffff; background-color: #3f3f3f; >.main-navigation ul ul < background-color: #3f3f3f; >.main-navigation .main-nav ul ul li a < color: #ffffff; >.main-navigation .main-nav ul ul li:hover>a, .main-navigation .main-nav ul ul li:focus>a, .main-navigation .main-nav ul ul li.sfHover>a < color: #ffffff; background-color: #4f4f4f; >.main-navigation . main-nav ul ul li[class*="current-menu-"]>a < color: #ffffff; background-color: #4f4f4f; >.main-navigation .main-nav ul ul li[class*="current-menu-"]>a:hover, .main-navigation .main-nav ul ul li[class*="current-menu-"] .sfHover>a < color: #ffffff; background-color: #4f4f4f; >.separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .one-container .container, .separate-containers .paging-navigation, .inside-page-header < background-color: #ffffff; >.entry-meta < color: #595959; >.entry-meta a, .entry-meta a:visited < color: #595959; >.entry-meta a:hover < color: #1e73be; >.sidebar .widget < background-color: #ffffff; >.sidebar .widget .widget-title < color: #000000; >.footer-widgets < background-color: #ffffff; >.footer-widgets .widget-title < color: #000000; >.site-info < color: #ffffff; background-color: #222222; >.site-info a, .site-info a:visited < color: #ffffff; >.site-info a:hover < color: #606060; >.footer-bar .widget_nav_menu .current-menu-item a < color: #606060; >input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select < color: #666666; background-color: #fafafa; border-color: #cccccc; >input[type="text"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="password"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="number"]:focus, textarea:focus, select:focus < color: #666666; background-color: #ffffff; border-color: #bfbfbf; >button, html input[type="button"], input[type="reset"], input[type="submit"], a.button, a.button:visited, a.wp-block-button__link:not(.has-background) < color: #ffffff; background-color: #666666; >button:hover, html input[type="button"]:hover, input[type="reset"]:hover, input[type="submit"]:hover, a.button:hover, button:focus, html input[type="button"]:focus, input[type="reset"]:focus, input[type="submit"]:focus, a.button:focus, a.wp-block-button__link:not(.has-background):active, a.wp-block-button__link:not(.has-background):focus, a.wp-block-button__link:not(.has-background):hover < color: #ffffff; background-color: #3f3f3f; >.generate-back-to-top, .generate-back-to-top:visited < background-color: rgba( 0, 0, 0, 0.4); color: #ffffff; >.generate-back-to-top:hover, .generate-back-to-top:focus < background-color: rgba( 0, 0, 0, 0.6); color: #ffffff; >.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull < margin-left: -40px; width: calc(100% + 80px); max-width: calc(100% + 80px); >@media (max-width:768px) < .separate-containers .inside-article, .separate-containers .comments-area, .separate-containers .page-header, .separate-containers .paging-navigation, .one-container .site-content, .inside-page-header < padding: 30px; >.entry-content .alignwide, body:not(.no-sidebar) .entry-content .alignfull < margin-left: -30px; width: calc(100% + 60px); max-width: calc(100% + 60px); >> .rtl .menu-item-has-children .dropdown-menu-toggle < padding-left: 20px; >.rtl .main-navigation .main-nav ul li.menu-item-has-children>a < padding-right: 20px; >.one-container .sidebar .widget < padding: 0px; >.append_row < color: black !important; background-color: #FFD6D6 !important; border: 1px #ccc solid !important; >.append_column < color: black !important; background-color: #D6FFD6 !important; border: 1px #ccc solid !important; >table#my-table td < width: 50px; height: 27px; border: 1px solid #D3D3D3; text-align: center; padding: 0; >div#my-container input < padding: 5px; font-size: 12px !important; width: 100px; margin: 2px; >.row < background-color: #FFD6D6 !important; >.col   
 
 
 
 
 
  
 
Small

Источник

how to dynamically add rows to table using html, css and javascript

In this tutorial, we will learn how to create a dynamic table that dynamically adds a row on clicking on the Add Row button.

Prerequisite

Basic knowledge of Html, CSS and JavaScript are required to fully understand the content of this post.

Html

First, we have to create the initial table that you see when you first load the page using Html

 id="table-container">
 
 id="main-table" cellspacing="0">
 
 colspan="2">Dynamic Table 
 
 
 Row 1 Column 1 
 
 Row 1 Column 2 
 
 
 
 id="add-row">Add Row

CSS

#table-container 
max-width: 400px;
padding: 5px;
margin: 0 auto;
>
#main-table 
width: 100%;
color: white;
>
#main-table th 
background: #27afd8;
padding: 7px;
>
#main-table td 
background: #4a9eb8;
text-align: center;
padding: 7px;
>

#table-container button 
float: right;
border: none;
padding: 5px 12px;
margin: 10px 0;
background: #27afd8;
color: white;
cursor: pointer;
>

JavaScript

Now we have to code the addRow() function that adds the rows dynamically.

//Adds a click listener to the add-row button
document.querySelector("#add-row").addEventListener("click", () => 
//calls the addRow() method on clicking the button
addRow();
>);

//initializing the row counter
let x = 2;

const addRow = () => 
//creates a new row element
let row = document.createElement("tr");

//creates a new column element
let column1 = document.createElement("td");

//create text for the column element
const column1text = document.createTextNode(`Row $x> Column 1`);

//appends the text to the column element
column1.appendChild(column1text);
let column2 = document.createElement("td");
const column2text = document.createTextNode(`Row $x> Column 2`);
column2.appendChild(column2text);

//appends the first column to the new row
row.appendChild(column1);

//appends the second column to the new row
row.appendChild(column2);

//appends the row to the table
document.querySelector("#main-table").appendChild(row);
x++;
>;

Conclusion

knowing how to load elements dynamically is very important especially when loading content from a server or collecting information randomly from users. Hope you enjoyed the tutorials, see you in the next

Источник

Table insertRow() Method

The insertRow() method inserts the new row(s) at the specified index in the table.

Tip: Use the deleteRow() method to remove a row.

Browser Support

Syntax

Parameter Values

Value Description
index Required in Firefox and Opera, optional in IE, Chrome and Safari. A number that specifies the position of the row to insert (starts at 0). The value of 0 results in that the new row will be inserted at the first position.

The value of -1 can also be used, this results in a new row being inserted at the last position.

This parameter is required in Firefox and Opera, but optional in Internet Explorer, Chrome and Safari.

Technical Details

More Examples

Example

function myCreateFunction() <
var table = document.getElementById(«myTable»);
var row = table.insertRow(0);
var cell1 = row.insertCell(0);
var cell2 = row.insertCell(1);
cell1.innerHTML = «NEW CELL1»;
cell2.innerHTML = «NEW CELL2»;
>

function myDeleteFunction() document.getElementById(«myTable»).deleteRow(0);
>

Unlock Full Access 50% off

COLOR PICKER

colorpicker

Join our Bootcamp!

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials
Top References
Top Examples
Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник

Оцените статью