table.deleteRow(index)

The deleteRow() method is used to delete the row at the specified position from a table.
Syntax
HTMLTableElement.deleteRow(index);

  • HTMLTableElement is a reference to a HTML table element.
  • index is the row index to be deleted.

function DeleteItem(img){
var grid = document.getElementById(grdCountersPeriods”);
var row = 0;
for(var i=1; i< grid.rows.length; i++){
if((grid.rows[i].cells[2].innerHTML).indexOf(img.id) != -1){
row = grid.rows[i].rowIndex
}
}
grid.deleteRow(row);
}

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

Javascript Location object

The client – side Javascript/JScript/ECMAScript model has a rich set of methods and properties related to the Page and Window objects. One of the most useful of these is the ability to parse the various components of the URL. But before we look at that, this might be a good time to review the methods and properties of the location object.
The Location object is part of a Window object and is accessed through the window.location property. It contains the complete URL of a given Window object, or, if none is specified, of the current Window object.

The invocation of setting the window.location property immediately instructs the browser to perform the requested navigation.
PROPERTIES:

  • hash Property:  The hash property is a string beginning with a hash (#), that specifies an anchor name in an HTTP URL
  • host Property: The host property is a string comprising of the hostname and port strings.
  • hostname Property:  The hostname property specifies the server name, subdomain and domain name (or IP address) of a URL.
  • href Property : The href property is a string specifying the entire URL, and of which all other Link properties are substrings.
  • pathname Property: The pathname property is a string portion of a URL specifying how a particular resource can be accessed.
  • port Property:  The port property is a string specifying the communications port that the server uses.
  • protocol Property:  The protocol property is the string at the beginning of a URL, up to and including the first colon ( : ), which specifies the method of access to the URL, e.g. “http:”, “mailto:”, “ftp:”, etc.
  • search Property:  The search property is a string beginning with a question mark that specifies any query information in an HTTP URL.

METHODS

  • reload Method: The reload method forces a reload of the window’s current document, i.e. the one contained in the Location.href property (location.reload([forceGet])) . For example, onClick = ” window.location.reload(true)” would force a GET reload, ignoring the fact that the document may already be in the cache.
  • replace Method: The replace method replaces the current History entry with the specified URL. After calling the replace method, you cannot navigate back to the previous URL using the browser’s Back button.