Html table row javascript

Table

Объект Table представляет собой HTML элемент .

Свойства объекта Table

элементов в таблице

caption	Возвращает элемент таблицы
rows	Возвращает коллекцию всех
tBodies	Возвращает коллекцию всех элементов в таблице
tFoot	Возвращает ссылку на элемент таблицы
tHead	Возвращает ссылку на элемент таблицы

Методы объекта Table

) из таблицыэлемент и добавляет его к таблице

createCaption()	Создает пустой элемент и добавляет его к таблице
createTFoot()	Создает пустой элемент и добавляет его к таблице
createTHead()	Создает пустой элемент и добавляет его к таблице
deleteCaption()	Удаляет элемент из таблицы
deleteRow()	Удаляет строку (
deleteTFoot()	Удаляет элемент из таблицы
deleteTHead()	Удаляет элемент из таблицы
insertRow()	Создает пустой

caption

Свойство caption возвращает элемент таблицы.

Синтаксис

Возвращаемое значение

элемент таблицы, или нулевое значение , если он не определен

Пример

 table, td < border: 1px solid black; >td em 
Это есть caption
 
 
cell 1
 
cell 2
 
 
 
cell 3
 
cell 4
 
 
 Узнать caption 
 function myFunction()

createCaption()

Метод createCaption создает пустой элемент и добавляет его к таблице

Синтаксис

Возвращаемое значение

Пример

 table, td < border: 1px solid black; >td em 
 
cell 1
 
cell 2
 
 
 
cell 3
 
cell 4
 
 
 Создать caption
 
Удалить caption  

createTFoot()

Метод createTFoot создает пустой элемент и добавляет его к таблице

Синтаксис

Возвращаемое значение

Пример

 table, td < border: 1px solid black; >td em 
 
cell 1
 
cell 2
 
 
 
cell 3
 
cell 4
 
 
 Создать TFOOT
 
Удалить TFOOT  

createTHead()

Метод createTHead метод создает пустой элемент и добавляет его к таблице.

Синтаксис

Возвращаемое значение

Пример

 table, td < border: 1px solid black; >td em 
 
cell 1
 
cell 2
 
 
 
cell 3
 
cell 4
 
 
 Создать THEAD
 
Удалить THEAD 
  

deleteCaption()

Метод deleteCaption удаляет элемент из таблицы.

Синтаксис

Возвращаемое значение

Нет возвращаемого значения

Примеры

deleteRow()

Метод deleteRow удаляет строку с указанным индексом из таблицы.

Синтаксис

tableObject.deleteRow( index )

Параметры

index Целое число, которое указывает положение строки для удаления (начинается с 0). Если index = -1 , то будет удалена последняя строка.

Пример

 table, td < border: 1px solid black; >td em 
 
row 1 cell 1
 
row 1 cell 2
 
 
 
row 2 cell 1
 
row 2 cell 2
 
 
 
row 3 cell 1
 
row 3 cell 2
 
 
 Вставить TR
 
Удалить 1-ю строку 
  

deleteTFoot()

Метод deleteTFoot удаляет элемент из таблицы.

Синтаксис

Возвращаемое значение

Нет возвращаемого значения

Примеры

deleteTHead()

Метод deleteTHead удаляет элемент из таблицы.

Синтаксис

Возвращаемое значение

Нет возвращаемого значения

Примеры

insertRow()

Синтаксис

tableObject.insertRow( index )

Параметры

index Число, которое указывает положение строки в таблице (начинается с 0). Если index = -1 , то строка добавляется в конец таблицы.

Примеры

rows

Свойство rows возвращает коллекцию всех элементов в таблице. Элементы коллекции сортируются , как они появляются в исходном коде.

Синтаксис

tableObject.rows.length /* возвращает количество элементов в коллекции. */ tableObject.rows[index] /* возвращает элемент с указанным индексом или пустое значение , если индекс находится вне диапазона */ tableObject.rows.item(index) /* возвращает с указанным индексом или пустое значение, если индекс находится вне диапазона */ tableObject.rows.namedItem(id) /* возвращает с указанным идентификатором или пустое значение, если идентификатор не существует */

Возвращаемое значение

Коллекция (массив) всех элементов в таблице.

Пример

 table, td < border: 1px solid black; >td em 
 
cell 1
 
cell 2
 
 
 
cell 3
 
cell 4
 
 
 
cell 5
 
cell 6
 
 
 Узнать количество TR-элементов в таблице. 
  

tBodies

Свойство rows возвращает коллекцию всех элементов в таблице. Элементы коллекции сортируются , как они появляются в исходном коде.

Синтаксис

tableObject.tBodies.length /* возвращает количество элементов в коллекции. */ tableObject.tBodies[index] /* возвращает элемент с указанным индексом или пустое значение , если индекс находится вне диапазона */ tableObject.tBodies.item(index) /* возвращает с указанным индексом или пустое значение, если индекс находится вне диапазона */ tableObject.tBodies.namedItem(id) /* возвращает с указанным идентификатором или пустое значение, если идентификатор не существует */

Возвращаемое значение

Коллекция (массив) всех элементов в таблице.

Пример

 table, td < border: 1px solid black; >td em 
 
 
cell 1
 
cell 2
 
 
 
 
cell 3
 
cell 4
 
 
 
cell 5
 
cell 6
 
 
 Узнать количество TBODY-элементов в таблице. 
  

tFoot

Свойство tFoot возвращает ссылку на элемент таблицы.

Синтаксис

Возвращаемое значение

Ссылка на элемент таблицы, или null , если он не определен

tHead

Свойство tHead возвращает ссылку на элемент таблицы.

Источник

Table rows Collection

Note: The elements in the collection are sorted as they appear in the source code.

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

Tip: Use the deleteCell() method to delete a cell.

Browser Support

Syntax

Properties

elements in the collection.

Property	Description
length	Returns the number of

Methods

element from the collection with the specified index (starts at 0).

Method	Description
[index]	Returns the

Technical Details

elements in the

DOM Version:	Core Level 2 Document Object
Return Value:	An HTMLCollection Object, representing all

element. The elements in the collection are sorted as they appear in the source code

More Examples

Example

Example

Example

Example

Change the content of the first table cell:

Related Pages

COLOR PICKER

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.

Источник

How to Add Row to HTML Table Using JavaScript

Sometimes, while developing a website, there can be a requirement to create or remove rows and cells or add data in a table dynamically using JavaScript. JavaScript is a dynamic language that helps in dynamically controlling, gaining access to, and modifying HTML components on the client side. More specifically, it can be utilized to add a row to an HTML table.

This manual will use JavaScript to explain the procedure for adding a row to a table.

How to Add Row to HTML Table Using JavaScript?

For adding a row in a table, use the following procedures:

Let’s check each procedure individually.

Method 1: Add Row to HTML Table Using insertRow() Method

If you intend to add the row at the last/end of the table, then pass index “-1” as an argument.

Use the following syntax for adding rows in a table with the help of the insertRow() method:

Here, “index” indicates the position where you want to add a new row, such as at the end of the table or at the start.

Example 1: Adding a Row at the Top/Start of the Table

Here, we will create a table and a button in an HTML file using the HTML and tags. The table contains three rows and three columns or cells:

Then, create a button which will invoke the “addRow()” button when clicked:

For styling the table, we will set the border of each cell and the table as given below:

Now, we will add rows in the table at the top/start of the table using JavaScript. To do so, define a function named “addRow()” that will be called on the button’s onclick() event. Then, fetch the created table using the “getElementById()” method. After that, call the “insertRow()” method by passing the “0” index as a parameter that indicates the row will be added at the start of the table.

Then, invoke the “insertCell()” method by passing indexes that show how many cells will be added to the row. Finally, add the text data or text in cells using “innerHTML” property:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = tableRow. insertRow ( 0 ) ;
var cell1 = row. insertCell ( 0 ) ;
var cell2 = row. insertCell ( 1 ) ;
var cell3 = row. insertCell ( 2 ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
}

As you can see in the output, the new row is added at the top of the existing table by clicking on the button:

Example 2: Adding a Row at the End of the Table

If you want to insert a row at the last/end of the table, pass the “-1” index to the “insertRow()” method. It will add the row at last when the button is clicked:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = tableRow. insertRow ( — 1 ) ;
var cell1 = row. insertCell ( 0 ) ;
var cell2 = row. insertCell ( 1 ) ;
var cell3 = row. insertCell ( 2 ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
}

Let’s move to the other method!

Method 2: Add Row to HTML Table by Creating New Element

Follow the provided syntax to create a new element for adding a row in a table using JavaScript:

Here, the “tr” is the table row.

Example

We will now use the same previously created table in HTML with a CSS file, but in the JavaScript file, we will use the “createElement()” method. Then, add the data or text in the cells using the “innerHTML” property. Lastly, invoke the “appendChild()” method that will add the cells in a row and then the row in a table:

functionaddRow ( ) {
var tableRow = document. getElementById ( «table» ) ;
var row = document. createElement ( «tr» ) ;
var cell1 = document. createElement ( «td» ) ;
var cell2 = document. createElement ( «td» ) ;
var cell3 = document. createElement ( «td» ) ;
cell1. innerHTML = «Cell of New Row» ;
cell2. innerHTML = «Cell of New Row» ;
cell3. innerHTML = «Cell of New Row» ;
row. appendChild ( cell1 ) ;
row. appendChild ( cell2 ) ;
row. appendChild ( cell3 ) ;
tableRow. appendChild ( row ) ;
}

The output shows that the new row is successfully added at the end of the table:

We have compiled all the methods for adding a row in a table using JavaScript.

Conclusion

For adding a row in a table, use the two approaches: insertRow() method or create a new element using JavaScript predefined methods, including the appendChild() method and the createElement() method. You can add a row at the start of the end of the table using the insertRow() method by passing indexes. This manual explained the procedures for adding a new row in a table by clicking on a button using JavaScript.

About the author

Farah Batool

I completed my master’s degree in computer science. I am an academic researcher and love to learn and write about new technologies. I am passionate about writing and sharing my experience with the world.

Источник