Example : How to display any cell content or value stored in an html table.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
</head>
<body>
<table id="chl">
<tr>
<td>Codershelpline 1</td>
<td id="row1">Codershelpline 2</td>
</tr>
<tr>
<td>Codershelpline 3</td>
<td>Codershelpline 4</td>
</tr>
<tr>
<td>Codershelpline 5</td>
<td>Codershelpline 6</td>
</tr>
</table>
<br>
<button onclick="tablevalue()">Click Me</button>
<script>
function tablevalue()
{
alert(document.getElementById("chl").rows[0].cells[1].innerHTML);
//alert(document.getElementById("chl").rows[0].cells.item(1).innerHTML);
//alert(document.getElementById("chl").rows[0].cells.namedItem("row1").innerHTML);
}
</script>
</body>
</html>
Output : Codershelpline 2Example : How to count the number of cells/columns in a particular row of an html table.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Codershelpline</title>
</head>
<body>
<table id="chl">
<tr>
<td>Codershelpline 1</td>
<td>Codershelpline 2</td>
</tr>
<tr>
<td>Codershelpline 3</td>
<td>Codershelpline 4</td>
</tr>
<tr>
<td>Codershelpline 5</td>
<td>Codershelpline 6</td>
</tr>
</table>
<br>
<p id="count"></p>
<button onclick="tablevalue()">Click Me</button>
<script>
function tablevalue()
{
var x = document.getElementById("chl").rows[0].cells.length;
document.getElementById("count").innerHTML = "There are " + x + "
cells in the first row element.";
}
</script>
</body>
</html>Example : How to get unique index value of a clicked table row & finally delete them using JS.
<!DOCTYPE html>
<html>
<head>
<title>Delete specific index record </title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
td:last-child
{
background-color:darkred;color: blue;
font-weight: bold; text-decoration: underline;
}
</style>
</head>
<body>
<table id="doctable" border="1">
<tr>
<td>Codershelpline 1</td>
<td>Content 1</td>
<td>Key1</td>
</tr>
<tr>
<td>Codershelpline 2</td>
<td>Content 2</td>
<td>Key2</td>
</tr>
<tr>
<td>Codershelpline 3</td>
<td>Content 3</td>
<td>Key3</td>
</tr>
<tr>
<td>Codershelpline 4</td>
<td>Content 4</td>
<td>Key4</td>
</tr>
</table>
<script>
var index, table1= document.getElementById('doctable');
for(var i=0; i<table1.rows.length; i++) //table index started from 0.
{
table1.rows[i].cells[2].onclick =function() //here cells means column.
{
var c =confirm("do you want to delete this row record");
if(c === true)
{
index =this.parentElement.rowIndex; //display index value
of clicked key.
table.deleteRow(index); // To delete clicked record.
alert(table1.rows[index].cells[1].innerHTML); //To print
clicked indexed value.
}
}
}
</script>
</body>
</html> 
0 Comments