table.insertRow()

insertRow inserts a new row in the table.

Syntax

var row = HTMLTableElement.insertRow(index);

  • HTMLTableElement is a reference to a HTML table element.
  • index is the row index of the new row.
  • row is assigned a reference to the new row.
  • If index is -1 or equal to the number of rows, the row is appended as the last row. If index is omitted or greater than the number of rows, an error will result.
  • If a table has multiple tbody elements, by default, the new row is inserted into the last tbody. To insert the row into a specific tbody:var specific_tbody=document.getElementById(tbody_id);var row=specific_tbody.insertRow(index)

function AddItems(){
showError(“”);
var grid = document.getElementById(“grdCountersPeriods”);
var ddlCounters = document.getElementById(ddlCountersId);
var ddlPeriods = document.getElementById(ddlPeriodsId);
var selectedCounter = ddlCounters.options[ddlCounters.selectedIndex].text;
var selectedPeriod = ddlPeriods.options[ddlPeriods.selectedIndex].text;
var selectedCounterId = ddlCounters.options[ddlCounters.selectedIndex].value;
var selectedPeriodId = ddlPeriods.options[ddlPeriods.selectedIndex].value;
if(selectedCounterId == “00000000-0000-0000-0000-000000000000” || selectedPeriodId == “”){
showError(noCounterSelectedError);
}else
if(arrayHasElement(selectedCounterId)){
showError(SelectionError);
}else{
// Insert a row in the table at the end
var newRow = grid.insertRow(-1);
newRow.style.height = “18px”;
if(grid.rows.length % 2 == 0){
newRow.className = ‘tableLight’;
}else{
newRow.className = ‘tableDark’;
}
// Insert a cell in the row at index 0
var cell1 = newRow.insertCell(0);
// Append a text node to the cell
var cell1Value = document.createTextNode(selectedCounter);
cell1.appendChild(cell1Value);
// Insert a cell in the row at index 1
var cell2 = newRow.insertCell(1);
// Append a text node to the cell
var cell2Value = document.createTextNode(selectedPeriod);
cell2.appendChild(cell2Value);
// Insert a cell in the row at index 2
var cell3 = newRow.insertCell(2);
cell3.innerHTML = ‘<img id=\”‘ + selectedCounterId + ‘ \” src=”images/delete.gif” alt=”” onclick=”DeleteItem(this);”/>’;
//Insert a cell in the row at index 3
var cell4 = newRow.insertCell(3);
// Append a text node to the cell
var cell4Value = document.createTextNode(selectedCounterId);
cell4.style.display = “none”;
cell4.appendChild(cell4Value);
}
}
  
 
<table id=”grdCountersPeriods” cellpadding=”4″ width=”310px”> 
<tr> 
<td style=”width: 100px; height: 18px; border: 0px”> 
</td> 
<td style=”width: 150px; height: 18px; border: 0px”> 
</td> 
<td style=”width: 60px; height: 18px; border: 0px”> 
</td> 
<td style=”height: 18px; display: none; border: 0px”> 
</td> 
</tr>
</table>

To be valid in an HTML document, a TR must have at least one TD element.
Note that insertRow inserts the row directly into the table and returns a reference to the new row. The row does not need to be appended separately as would be the case if document.createElement() had been used to create the new TR element.

more info: DOM table methods

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s