Example : How to display any cell value from 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 2
Example : How to count the number of cells/columns in a 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 index value of a clicked table row & delete them in html.
<!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>

 174 total views,  1 views today


0 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.