I have an HTML table dynamically generated by js, and I want to add each row an onClick event.
Like this
(because of need to pass complex parameters in my original code, I use Javascript to add onclick function):
<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
</table>
<br />
<script type="text/javascript">
for (var i = 0; i < 4; i++) {
document.getElementById("tableID").innerHTML += '<tr><td>Text</td><td>MoreText</td><td>Lorem</td><td>Ipsum</td></tr>';
document.getElementById("tableID").rows[i+1].onclick = function () {
alert("Hello World");
//alert(i);
};
}
</script>
</body>
</html>
If the table row is fixed and declared in HTML document, using this method is working,
but in my code (dynamically generated table row), the onClick function only works in the last row.
I guess that maybe is asynchronous problem, but I can't figure out.
UPDATE
According to #Quentin's method, I edited my code. It works fine.
<!DOCTYPE html>
<html>
<body>
<table align="center" id="tableID" border="1" style="cursor: pointer;">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
</table>
<br />
<script type="text/javascript">
for (var i = 0; i < 4; i++) {
var table = document.getElementById('tableID');
var tr = document.createElement('tr');
tr.onclick = function () {
alert("Hello World");
};
var td1 = document.createElement('td');
td1.innerText = "Text";
var td2 = document.createElement('td');
td2.innerText = "MoreText";
var td3 = document.createElement('td');
td3.innerText = "Lorem";
var td4 = document.createElement('td');
td4.innerText = "Ipsum";
tr.appendChild(td1);
tr.appendChild(td2);
tr.appendChild(td3);
tr.appendChild(td4);
table.appendChild(tr);
}
</script>
</body>
</html>
You are assigning a new value to innerHTML.
This erases all the existing DOM elements and the event handlers attached to them and creates new ones (but you haven't got any code to recreate the event handlers you are deleting).
Don't use innerHTML. Use standard DOM methods: createElement, appendChild, etc. Then you can add your new row to the table body without changing what is already there.
<!DOCTYPE html>
<html>
<head>
<style>
table td { cursor: pointer; border: 1px solid black; }
#out { color: red; }
</style>
</head>
<body>
<table id="tableID">
<thead>
<th>Text</th>
<th>MoreText</th>
<th>Lorem</th>
<th>Ipsum</th>
</thead>
<tbody>
</tbody>
</table>
<div id="out"></div>
<script type="text/javascript">
function createCell(i, row, text) {
var td = document.createElement('td');
var content = document.createTextNode(text + i);
td.appendChild(content);
td.addEventListener('click', function() { document.getElementById('out').innerHTML = 'You clicked ' + this.innerHTML; }, false);
row.appendChild(td);
}
for (var i = 0; i < 4; i++) {
var tr = document.createElement('tr');
createCell(i, tr, 'a');
createCell(i, tr, 'b');
createCell(i, tr, 'c');
createCell(i, tr, 'd');
document.querySelectorAll('#tableID tbody')[0].appendChild(tr);
}
</script>
</body>
</html>
This should probably work, see demo: http://jsbin.com/lucequgotu
Related
I created a code to convert json data to html table using javascript and ajax:
Data:
[
["text1", "https://www.amazon.com", "text2", "https://www.ebay.com"],
["text3", "https://www.google.com", "text4", "https://www.yahoo.com"],
...
]
This is the code, it work well, but on the table result, the td containing links is text (column2 and column4,
I want to put the text inside href so the cell become link (instead of text):
const TabBody = document.querySelector("#tab > tbody")
function loadData() {
const request = new XMLHttpRequest();
request.open("get", "rows.json");
request.onload = () => {
try {
const json = JSON.parse(request.responseText);
populateTable(json);
} catch (e) {
console.warn("error");
}
};
request.send();
}
function populateTable(json){
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
td.textContent = cell;
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
document.addEventListener("DOMContentLoaded", () => { loadData();})
<body>
<table id="tab">
<thead>
<tr>
<th>column_1</th>
<th>column_2_link</th>
<th>column_3</th>
<th>column_4_link</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</body>
Instead of just adding a td with you can generate a link inside by checking the string with a Regular Expresion if that's your intention:
const td = document.createElement("td");
td.innerHTML = /https:\/\//g.test(cell)
? `${cell}`
: cell;
tr.appendChild(td);
You could create an anchor element if innerHTML is not safe for you, but that should get you going.
Sharing you one sample. Here, on clicking the update link button, it will update all td that have a link to a clickable item , ie it will get updated with an anchor tag
function populateTable(json){
var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here
while(TabBody.firstChild){TabBody.removeChild(TabBody.firstChild);}
json.forEach((row) => {
const tr = document.createElement("tr");
row.forEach((cell) => {
const td = document.createElement("td");
if(regex.test($(this).text())){
td.innerHTML = `Link`;
}
else{
td.textContent = cell;
}
tr.appendChild(td);})
TabBody.appendChild(tr);
})
}
Complete sample code for testing
<!DOCTYPE html>
<html>
<head>
<style>
table {
font-family: arial, sans-serif;
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #dddddd;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: #dddddd;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
// $('#tbl>tbody').find('td').css("background-color", "yellow");
var regex = new RegExp("(https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|www\.[a-zA-Z0-9][a-zA-Z0-9-]+[a-zA-Z0-9]\.[^\s]{2,}|https?:\/\/(?:www\.|(?!www))[a-zA-Z0-9]+\.[^\s]{2,}|www\.[a-zA-Z0-9]+\.[^\s]{2,})"); // expression here
$('table').find("td").each(function(data) {
if(regex.test($(this).text())){
$(this).html(`Contact`)
}
});
});
});
</script>
</head>
<body>
<table id="tbl">
<tr>
<th>Company</th>
<th>Contact</th>
<th>Country</th>
</tr>
<tbody> <tr>
<td>123123</td>
<td>https://www.amazon.com</td>
<td>Mexico</td>
</tr>
<tr>
<td>123123</td>
<td>https://www.amazon.com</td>
<td>Mexico</td>
</tr>
</tbody>
</table>
<button>Update Link</button>
</body>
</html>
What I am trying to do is create a admin page the I can use edit a table using Javascript. What this is for are live results for tractor pulling to post to our website. All I need is to be able to post the driver, vehicle, distance, and it automatically sort by distance. Currently I am able to do all this for one table, but I want to add a second table for another class. I don't know if this is possible or not. I thought about trying to call another table from a different html file, but don't know how to display both the tables from two different html files together. Any assistance is appreciated. I have some Javascript experience, but not as much as needed for this project.
I have tried to update two different html files which works, but can't get them on the same html page as if it were on our website.
I should be able to be on the admin page, type in the driver's details, click new row for next puller, save it and so on. Once done with the class, click new class (new table) and do it all over again. Once done I want to be able to publish it, but clear everything to be ready for the next event.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Results</title>
<style>
table {
border-spacing: 0;
width: 50%;
border: 1px solid #000000;
counter-reset: rowNumber;
}
th, td {
text-align: left;
padding: 16px;
}
table tr{
counter-increment: rowNumber;
}
tr:nth-child(even){
background-color: #f2f2f2
}
table tr td:first-child::before {
content: counter(rowNumber);
min-width: 1em;
margin-right: 0.5em;
}
</style>
</head>
<table>
<thead>
<th colspan="3"><h1 align="center">Medford, WI</h1></th>
<tr>
<th colspan="3"><h2 align="center">Light Super Stock Tractors</h2></th>
</tr>
<tr>
<th>Driver</th>
<th>Vehicle</th>
<th>Distance</th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</html>
<?php
if(!isset($_POST['myTable']))
die('No data provided.');
$table = $_POST['myTable'];
$handle = fopen('myTable.html','w');
$result = fwrite($handle,$table);
if($result)
fclose($handle);
else
die('Error writing file');
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery AJAX</title>
<link type="text/css" rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style rel="stylesheet" type="text/css">
tr, td,th{
border-collapse: collapse;
border:1px solid;
}
td{
height:22px;
min-width:125px;
}
</style>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js">"http://jquery.com"</script>
<script type="text/javascript">
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable').html('');
/*We load the table */
$.get('myTable.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable tbody').append(tr);
});
$('#addColumn').click(function (event) {
event.preventDefault();
$.each($('#myTable table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable').click(function (event) {
event.preventDefault();
var table = $('#myTable').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable').slideToggle();
}, 100);
});
});
});
</script>
<script type="text/javascript">
$(document).ready(function () {
var getTable = function () {
/*We empty the div */
$('#myTable2').html('');
/*We load the table */
$.get('myTable2.html', function (callback_data) {
var table = callback_data;
document.getElementById('myTable2').innerHTML = table;
});
};
getTable();
/* ----- */
/* New row button */
$('#addRow2').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable2 tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable2 tbody').append(tr);
});
$('#addHeader2').click(function (event) {
/* Prevents the real anchor click event (going to href link)*/
event.preventDefault();
/* We get the number of columns in a row*/
var colNumber = $($('#myTable2 tbody tr')[0]).children('td').length;
var tr = document.createElement('tr');
var td = "";
for (var i = 0; i < colNumber; i++) {
td = document.createElement('td');
td.appendChild(document.createTextNode("\n"));
tr.appendChild(td);
}
$('#myTable2 tbody').append(tr);
});
$('#addColumn2').click(function (event) {
event.preventDefault();
$.each($('#myTable2 table thead tr'), function () {
$(this).append('<th></th>');
})
$.each($('#myTable2 table tbody tr'), function () {
$(this).append('<td></td>');
});
});
$('#saveTable2').click(function (event) {
event.preventDefault();
var table = $('#myTable2').html();
$.post('saveTable.php', {
'myTable': table
}, function (callback_data) {
console.log(callback_data);
$('#myTable2').slideToggle('fast');
setTimeout(function () {
getTable();
$('#myTable2').slideToggle();
}, 100);
});
});
});
</script>
</head>
<body>
<h1 align="center">Live Results Admin Page</h1>
<section>
<article>
<div id="myTable" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
New row
</li>
<li>
New column
</li>
<li>
Save table
</li>
</ul>
</nav>
</article>
</section>
<section>
<article>
<div id="myTable2" contenteditable></div>
<nav data-type="table-tools">
<ul>
<li>
New row
</li>
<li>
New column
</li>
<li>
Save table
</li>
</ul>
</nav>
</article>
</section>
</body>
</html>
I am attempting to give each row that is dynamically added a unique ID. Basically by adding to the number each time the user clicks the add button. It is adding an ID, but not correctly, it is showing up as "undefined" in the dev tools.
var counter = 0;
function appendRow(id, style) {
var table = document.getElementById(id); // table reference
length = table.length,
row = table.insertRow(table.rows.length, 'id'); // append table row
row.setAttribute('id', style);
row.setAttribute('idName', style);
var i;
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'cust' + counter);
counter++
}
}
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode('_'); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('id', style); // set DIV class attribute
div.setAttribute('idName', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
table {
text-align: center;
}
td {
width: 100px;
}
tr:nth-child(even) {
background-color: #fff;
}
tr:nth-child(odd) {
background-color: #eee;
}
<button id="addCust" class="addSort" onclick="appendRow('custList')">add customer</button>
<div class="custScroll">
<table id="custListTop" contenteditable="false">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>Someone</td>
<td>Somewhere</td>
</tr>
</table>
</div>
The reason why the new elements are showing up as "undefined" is because the style argument of appendRow has not been provided.
To get the functionality that you're going for you have to remove style from the appendRow arguments and replace the references to style inside appendRow with 'cust' + counter.
Your style value is null here please check style value I have also added fiddle
Please check this code, When user is clicking on button the style value is undefined.
<button id="addCust" class="addSort" ***onclick="appendRow('custList')"***>add customer</button>
Appendrow function requires two parameters and you are just passing one.
var counter = 0;
$('#addCust').click(function() {
var table = document.getElementById('custListTop'); // table reference
length = table.length,
row = table.insertRow(table.rows.length, 'id'); // append table row
row.setAttribute('id', counter);
row.setAttribute('idName', counter);
var i;
// insert table cells to the new row
for (i = 0; i < table.rows[0].cells.length; i++) {
createCell(row.insertCell(i), i, 'cust' + counter);
counter++
}
});
function createCell(cell, text, style) {
var div = document.createElement('div'), // create DIV element
txt = document.createTextNode('_'); // create text node
div.appendChild(txt); // append text node to the DIV
div.setAttribute('id', style); // set DIV class attribute
div.setAttribute('idName', style); // set DIV class attribute for IE (?!)
cell.appendChild(div); // append DIV to the table cell
}
table {
text-align: center;
}
td {
width: 100px;
}
tr:nth-child(even) {
background-color: #fff;
}
tr:nth-child(odd) {
background-color: #eee;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="addCust" class="addSort">add customer</button>
<div class="custScroll">
<table id="custListTop" contenteditable="false">
<tr>
<td style="border-top-left-radius: 5px;">Customers</td>
<td style="border-top-right-radius: 5px;">Main Location</td>
</tr>
</table>
<table id="custList" contenteditable="true">
<tr>
<td>Someone</td>
<td>Somewhere</td>
</tr>
</table>
</div>
I am trying to implement a javascript which will highlight the column in an html table on click.As the below working example for row highlight i tried to use the same with table.columns but table.columns doesn't exist.Is there any was to highlight the column in html table using jquery?
Working code for highlighting row:
Table Highlight POC
<script>
function highlight() {
var table = document.getElementById('dataTable');
for (var i = 0; i < table.rows.length; i++) {
table.rows[i].onclick = function () {
if (!this.hilite) {
this.origColor = this.style.backgroundColor;
this.style.backgroundColor = '#BCD4EC';
this.hilite = true;
}
else {
this.style.backgroundColor = this.origColor;
this.hilite = false;
}
}
}
}
</script>
<style>
table {
border-spacing: 0px;
}
td {
border: 1px solid #bbb;
padding: 0.2em;
}
</style>
</head>
<body>
<table id="dataTable">
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
<tr onclick="highlight()"><td>Data1</td><td>Data2</td></tr>
</table>
</body>
</html>
You can use the following code:
$('td').on('click', function() {
var $currentTable = $(this).closest('table');
var index = $(this).index();
$currentTable.find('td').removeClass('selected');
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
Just put this on your JS file and it will work on all available tables independently. In case you want to use it only on a specific table, just change the initial selector to $('#myTable td').
Also dont forget to add the .selected{ background-color: #ace; } class in yor css file.
Here is the working example.
Cheers!
Please try this:
$("#dataTable tr td").click(function() {
//Reset
$("#dataTable td").removeClass("highlight");
//Add highlight class to new column
var index = $(this).index();
$("#dataTable tr").each(function(i, tr) {
$(tr).find('td').eq(index).addClass("highlight");
});
});
.highlight {
background-color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="dataTable">
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
<tr><td>Data1</td><td>Data2</td></tr>
</table>
A fork Fisnik Tahiri solution to support also the tr selection (based on css or jquery if you preferir)
css:
.selected{ background-color: #ace; }
tr:hover{ background-color: #ace; }
Js:
$('td').on('mouseenter', function() {
var $currentTable = $(this).closest('table');
//var $row = $(this).closest('tr');
var index = $(this).index();
//clean
$currentTable.find('td').removeClass('selected');
//select row if you want use js
//$currentTable.find('tr').removeClass('selected');
//$row.addClass('selected');
//select column
$currentTable.find('tr').each(function() {
$(this).find('td').eq(index).addClass('selected');
});
});
working example
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>onclick highlight</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$( ".table tr" ).click(function(){
$(".table tr" ).css("background-color","white");
$(this).css("background-color","green");
});
});
</script>
</head>
<body>
<table class="table">
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
<tr>
<td>Date1</td>
<td>Date2</td>
<td>Date3</td>
</tr>
</table>
</body>
</html>
Suppose this table :
<table>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
With this CSS:
<style>
.even{background:red;}
</style>
How can I write a pure js code that adds even class to even tr's of table ? [No jQuery]
If you just need it for style reasons, you can use CSS3 selectors (no JavaScript needed):
tr:nth-child(odd) {
background-color: red;
}
tr:nth-child(even) {
background-color: green;
}
Give the table an ID:
<table id="mytable"></table>
then:
var i, len,
// assuming only one tbody
// if none specified, it is automatically generated (like in your example)
// if you were to have several you would have to iterate over those too
rows = document.getElementById("mytable").
getElementsByTagName("tbody")[0].
getElementsByTagName("tr");
for (i = 1, len = rows.length; i < len; i += 2) {
rows[i].className += " even";
}
Just grab the table element by ID and loop the rows adding classnames as in this fiddle
<table id='myTable'>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
var table = document.getElementById('myTable');
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "even";
}else{
rows[i].className = "odd";
}
}
How about this one from this page full of table style tips. It does both odd and even rows, but you can alter it to suit your situation.
<!-- Javascript goes in the document HEAD -->
<script type="text/javascript">
function altRows(id){
if(document.getElementsByTagName){
var table = document.getElementById(id);
var rows = table.getElementsByTagName("tr");
for(i = 0; i < rows.length; i++){
if(i % 2 == 0){
rows[i].className = "evenrowcolor";
}else{
rows[i].className = "oddrowcolor";
}
}
}
}
window.onload=function(){
altRows('alternatecolor');
}
</script>
<!-- CSS goes in the document HEAD or added to your external stylesheet -->
<style type="text/css">
table.altrowstable {
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #a9c6c9;
border-collapse: collapse;
}
table.altrowstable th {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
table.altrowstable td {
border-width: 1px;
padding: 8px;
border-style: solid;
border-color: #a9c6c9;
}
.oddrowcolor{
background-color:#d4e3e5;
}
.evenrowcolor{
background-color:#c3dde0;
}
</style>
<!-- Table goes in the document BODY -->
<table class="altrowstable" id="alternatecolor">
<tr>
<th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th>
</tr>
<tr>
<td>Text 1A</td><td>Text 1B</td><td>Text 1C</td>
</tr>
<tr>
<td>Text 2A</td><td>Text 2B</td><td>Text 2C</td>
</tr>
</tr>
<tr>
<td>Text 3A</td><td>Text 3B</td><td>Text 3C</td>
</tr>
<tr>
<td>Text 4A</td><td>Text 4B</td><td>Text 4C</td>
</tr>
<tr>
<td>Text 5A</td><td>Text 5B</td><td>Text 5C</td>
</tr>
</table>
<!-- The table code can be found here: http://www.textfixer/resources/css-tables.php#css-table03 -->
I have corrected , here is answer:
<html>
<head>
<title></title>
<meta name="author" content="SAP"/>
<meta name="keywords" content="key1,key2"/>
<style>
.even{color:red;background:blue;}
</style>
<script type="text/javascript">
var i, len;
function onload() {
var i, len, rows = document.getElementById("mytable").getElementsByTagName("tr");
for (i = 1, len = rows.length; i < len; i += 2) {
rows[i].className += " even";
}
}
</script>
</head>
<body onload="onload()">
<table id="mytable">
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
<tr><td>AAAAAAAA</td><td>NNNNNNNNNN</td></tr>
</table>
</body>
</html>