I've been able to fish around for solutions and matched them up for my case, but it seems like I hit a dead end.
Goal: Website asks you to type any word in textbox and submit it. On submit it generates a table by using JavaScript, breaking the word to letters and placing them on the table diagonally.
Current position: I've managed to successfully post the given word in to JavaScript variable, from where I've been able to break the word to separate characters. I've also generated a HTML table with JavaScript, but how do I get the word in there?
I'm happy with an answer that solves that problem of mine, but bonus points are given if it generates the table and it's content diagonally like this:
[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]
Here are my codes:
function printWord() {
var word = document.getElementById('word').value;
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='80%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<3;i++){
var tr=document.createElement('tr');
for(var j=0;j<2;j++){
if(i==2 && j==1){
break
} else {
var td=document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i==1&&j==1?td.setAttribute('rowSpan','2'):null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
for (var i = 0; i < word.length; i++) {
console.log(word.charAt(i));
}
}
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Appreciate any help or tips given!
Here you go..
I have just updated the logic into your code for Printing the Letters.
Try it.
function printWord() {
var word = document.getElementById('word').value;
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='80%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<word.length;i++){
var tr=document.createElement('tr');
for(var j=0;j<word.length;j++){
var td=document.createElement('td');
if(j==i){
td.appendChild(document.createTextNode(word[j]));
}
tr.appendChild(td)
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
for (var i = 0; i < word.length; i++) {
console.log(word.charAt(i));
}
}
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>
Here is a solution for your issue:
function generateTable() {
var $c = document.getElementById("container");
var $table = document.createElement('table');
var $tbody = document.createElement('tbody');
var word = document.getElementById('word').value.split("");
$c.appendChild($table);
$table.appendChild($tbody);
for (var i=0, l=word.length; i<l; i++) {
var $tr = document.createElement('tr');
$tbody.appendChild($tr);
for (var j=0, jl=word.length; j<jl; j++) {
var $td = document.createElement('td');
$td.appendChild(document.createTextNode(i==j ? word[i] : "-"));
$tr.appendChild($td);
}
}
}
<textarea id="word"></textarea><br>
<button id="generate" onclick="generateTable();">Generate</button>
<div id="container"></div>
Try this.. it is simple and easy to implement:
Demo JS Fiddle
<script>
function printWord() {
var word = document.getElementById('word').value;
var tableObj = '<table border="1">';
for(var i=0; i<word.length; i++) {
var rowObj = '<tr>';
for(var j=0; j<word.length; j++) {
var cellObj = '<td>';
if(i == j) {
cellObj += word.charAt(i);
} else {
cellObj += '-';
}
cellObj += '</td>';
rowObj += cellObj;
}
rowObj += '</tr>';
tableObj += rowObj;
}
jQuery('#dynaTableContainer').empty();
jQuery('#dynaTableContainer').append(tableObj);
}
</script>
<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
<div id="dynaTableContainer">
</div>
</body>
</html>
Thanks,
~Chandan
Unless there's a reason to create the elements individually, you could build a string of the HTML like this:
function buildTable(word) {
var s= '<table>';
word.split('').forEach(function(val, idx) {
s+= '<tr>'+
(new Array(idx+2).join('<td>'))+val+
(new Array(word.length-idx).join('<td>'));
});
s+= '</table>';
document.getElementById('output').innerHTML= s;
} //buildTable
function buildTable(word) {
var s= '<table>';
word.split('').forEach(function(val, idx) {
s+= '<tr>'+
(new Array(idx+2).join('<td>'))+val+
(new Array(word.length-idx).join('<td>'));
});
s+= '</table>';
document.getElementById('output').innerHTML= s;
} //buildTable
table {
border: 1px solid black;
border-spacing: 0px;
}
td {
border: 1px solid #ddd;
width: 1.5em;
height: 1.5em;
text-align: center;
}
Enter a word:
<input id="word" type="text" onchange="buildTable(this.value)">
<div id="output"></div>
Related
I need to make a little site that get some text boxes, ('Codigo' 'Nome' 'Documento') put on a array, that I already did, and make a a function with ForEach to create only one <tr> to three <td> I'm just not understand what I'm doing bad
function atualizarTabela() {
var tabelaBody = document.getElementById("corpo-tabela"); // corpo-tabela = tbody I need to clean it first
tabelaBody.innerHTML = "";
registros.forEach(function (registros) { // registros is my array that content the three text boxes
var createTr = document.createElement('tr');
for (var i = 0; i < registros[i]; i++) {
var createTd = document.createElement("td");
createTd.textContent = registro[i];
createTr.appendChild(createTd);
}
});
};
<body>
<table id="clientes">
<thead>
<tr>
<th>Codigo</th>
<th>Nome</th>
<th>Documento</th>
</tr>
</thead>
<tbody id="corpo-tabela">
</tbody>
</table>
<div id="bloco-dados">
<p>Código</p>
<input type="text" id="txtCodigo" name="Código">
<p>Nome</p>
<input type="text" id="txtNome" name="Nome">
<p>Documento</p>
<input type="text" id="txtDocumento" name="Documento"><br>
<input type="button" name="botao" id="btnSalvar" value="Salvar"><br>
<input type="button" name="botao2" id="btnNovo" value="Novo">
</div>
<script src="script.js" type="text/javascript"></script>
</body>
Thank you :)
Try removing the white space between function and the argument, and changing the argument to a dummy variable. So
registros.forEach(function(r) {
var createTr = document.createElement('tr');
for (var i = 0; i < r.length; i++) {
let createTd = document.createElement("td");
createTd.textContent = r[i];
createTr.appendChild(createTd);
tabelaBody.appendChild(createTr);
}
});
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>a1</title>
<link rel="stylesheet" href="a1.css" />
<script src="a1.js"></script>
</head>
<body>
<form id = "gallary" method="get" action="">
<div id="searchBox">
<input type="text" id="searchBar" placeholder="Search titles" />
<input type="submit" id="searchBtn" value="search" onclick="searchFunction()"/>
<select name="genre" id ="filterBar">
<option>Genre</option>
<option>Baroque</option>
<option>Mannerism</option>
<option>Neo-classicism</option>
<option>Realisim</option>
<option>Romanticism</option>
</select>
<input type="submit" id = "filterBtn" value="filter" onclick =
"filterFunction()" />
</div>
</form>
<div id="artistBox">
<table>
<caption>Paintings</caption>
<thead>
<tr>
<th></th>
<th>Title</th>
<th>Artist</th>
<th>Year</th>
<th>Genre</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="05030.jpg"/></td>
<td>Death of Marat</td>
<td>David, Jacques-Louis</td>
<td>1793</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="120010.jpg"/></td>
<td>Potrait of Eleanor of Toledo</td>
<td>Bronzino, Agnolo</td>
<td>1545</td>
<td>Mannerism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="07020.jpg"/></td>
<td>Liberty leading the people</td>
<td>Delacroix, Eugene</td>
<td>1830</td>
<td>Romanticism</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="13030.jpg"/></td>
<td>Arrangement in Grey and Black</td>
<td>Whistler, James Abbott</td>
<td>1871</td>
<td>Realisim</td>
</tr>
<tr>
<td><input type="checkbox" name="paintingname" /><img
src="06010.jpg"/></td>
<td>Mademoiselle Caroline Riviere</td>
<td>Ingres, Jean-Auguste</td>
<td>1806</td>
<td>Neo-classicism</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
enter code here
above is my HTML code.
the searchBar is for searcing titles(the second column of tbody), the filter is for filtering genres(the fourth column of tbody).
I want to search and filter some specific content form the table and use on-click to trigger my functions but it didn't work. Can anyone help me?
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementByTagName("tr");
var td;
var filter = document.getElementById("filterBar").value;
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[1];
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
}
You are setting the values of 'input', 'tbody','tr', and 'td' at the start of the script. These get evaluated when the script is loaded but destroyed when the the script file is finished loading. That is the "searchFunction" does not know about the values of these tags.
Consider the updated code: (see it in action at: Plunker)
<script type="text/javascript">
function makeGreen(inputDiv){
inputDiv.style.backgroundColor = "green";
}
function searchFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
console.log(input);
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
var filter = document.getElementById("filterBar").value;
if(td.innerHTML.toUpperCase() == input){
makeGreen(tr[i]);
}
};
}
function filterFunction(){
var input = document.getElementById("searchBar").value.toUpperCase();
var tbody = document.getElementById("tbody");
var tr = tbody.getElementsByTagName("tr");
for (var i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[4];
if(td.innerHTML == input){
tr[i].style.display = "";
}else{
tr[i].style.display = "none";
}
} // <-- Missing
}
</script>
I just decided to code a little html file which should create a multiplication table with integers from "start" to "end". Start and End are set before in a HTMl Form...
I can give 2 numbers as input and the tr and td elements are create but accessing them by ClassName and filling them with innerHTML does somehow not work.
Here is the Code:
<html>
<head>
<title>Das groࠥ 1x1</title>
<meta charset="utf-8">
</head>
<script type="text/javascript">
function malnehmen(Wert1, Wert2) {
Ausgabe = Wert1 * Wert2;
return Ausgabe;
}
function tabelle() {
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(i = start; i < end+1; i++) {
Reihe = document.createElement("tr");
att = document.createAttribute("class");
att.value = i + "a";
Reihe.setAttributeNode(att);
document.getElementById("Darein").appendChild(Reihe);
for(ii = start; ii < end+1; ii++) {
Feld = document.createElement("td");
att2 = document.createAttribute("class");
att2.value = malnehmen(i, ii);
Feld.setAttributeNode(att2);
Reihe.appendChild(Feld);
}
}
}
function ausfuellen() {
tabelle();
var start = document.forms["printer"].anfang.value;
var end = document.forms["printer"].ende.value;
for(a = start; a < end+1; a++) {
alert("Hier denn?");
document.getElementsByClassName(a + "a").innerHTML = a.toString();
for(aa = start; aa < end+1; aa++) {
multi = malnehmen(a, aa);
alert("Angekommen");
document.getElementsByClassName(multi).innerHTML = multi.toString();
}
}
}
</script>
<body>
<FORM name="printer">
<TABLE>
<tr>
<td>Beginnt bei:</td>
<td>
<input type="number" name="anfang" size="3">
</td>
</tr>
<tr>
<td>Endet bei:</td>
<td>
<input type="number" name="ende" size="3">
</td>
</tr>
<tr>
<td>
<input type="button" name="wassolldas" value="Erstellen" onclick="javascript: tabelle();">
</td>
</tr>
</TABLE>
</FORM>
<br>
<TABLE id="Darein" border="1">
</TABLE>
</body>
Does anybody know what I did wrong?
I built in 2 alerts just to see if the javascript part reaches the for loop but there is no pop up in browser.
I'm trying to create a Javascript if/then statement that goes along the lines of: if all of the checkboxes are checked then show this image, else show this other image. I'm completly stuck and not sure what to do...
<head>
<center>
<FONT FACE="LYDIAN,COMIC SANS MS,ARIAL" COLOR="#BDF6F4" SIZE="6"><MARQUEE LOOP="N"|"INFINITE" BGCOLOR="#E0BDF6" WIDTH="68%" HEIGHT="60" ALIGN="MIDDLE" HSPACE="4%" VSPACE="25">My To-Do List: Just Do It!</MARQUEE></FONT>
<p>
<span style="color:#937AF0">
Put 'To-Do' tasks in order according to priority, to add a new task simply click the add button. When task on list is completed, check done!
</p>
</center>
<style>
table, th, td
{
border: 1px solid black;
}
</style>
</head>
<body>
<body style="background:#E6E6FA">
<center>
<table id="specialtable">
<table style="background:#BDF6F4">
<tr>
<th> Done</th>
<th>Priority</th>
<th>Task</th>
</tr>
<tr>
<td><input type="checkbox"</td>
<td>1<br></td>
<td><input type="text"></td>
<td><button onclick="addRow(this);">Add</button><br></td>
</tr>
</table>
</center>
<script type = "text/javascript">
function addRow(e)
{
var current = e.parentNode.parentNode; // <tr>...</tr>
var tnew = current.cloneNode(true);
var rowCount = current.parentNode.getElementsByTagName("tr").length;
tnew.getElementsByTagName("td")[1].textContent = rowCount;
current.parentNode.appendChild(tnew);
}
</script>
</head>
<body>
You could code:
var thisImage = document.getElementById('thisImage'),
thatImage = document.getElementById('thatImage'),
checkboxes = document.querySelectorAll('input[type=checkbox]'),
cLen = checkboxes.length;
function changeHandler() {
// compare the length of the checkboxes
// with the length of checked ones
var allChecked = Array.prototype.filter.call(checkboxes, function(e) {
return e.checked;
}).length === cLen;
if (allChecked) {
thisImage.style.display = 'block';
thatImage.style.display = 'none';
} else {
thisImage.style.display = 'none';
thatImage.style.display = 'block';
}
}
Array.prototype.forEach.call(checkboxes, function (e) {
e.addEventListener('change', changeHandler, false);
});
Refer this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<script>
function count(obj){
var x = document.getElementsByTagName("INPUT");
var y = [];
for (var cnt = 0; cnt < x.length; cnt++) {
if (x[cnt].type == "checkbox") y.push(x[cnt]);
}
var chkboxCount = y.length;
var cnt = 0;
for(var i=1; i<=chkboxCount; i++){
var checkbox = 'chk' + i;
if(document.getElementById(checkbox).checked){
cnt++;
}
}
if(cnt == 3){
document.getElementById('pic').innerHTML = '<img src = "img_flwr.gif">';
} else{
document.getElementById('pic').innerHTML = '<img src = "img_tree.gif">';
}
}
</script>
<input type="checkbox" name="chk1" id="chk1" onclick="count(this)">
<input type="checkbox" name="chk2" id="chk2" onclick="count(this)">
<input type="checkbox" name="chk3" id="chk3" onclick="count(this)">
<br>
<div id="pic"></div>
</body>
</html>
I have the following table being rendered in my browser. It's generated from the server side.
<table id="tblQuestions" class="tblQuestionsContainer" border="0">
<tr>
<td id="1" class="tdQuestion">Are u an indian citizen ?</td>
</tr><tr>
<td><table id="answer-1" border="0">
<tr>
<td><input id="answer-1_0" type="radio" name="answer-1" value="1" /><label for="answer-1_0">Yes</label></td><td><input id="answer-1_1" type="radio" name="answer-1" value="0" /><label for="answer-1_1">No</label></td>
</tr>
</table></td>
</tr><tr>
<td id="2" class="tdQuestion">Do you have a passport ?</td>
</tr><tr>
<td><table id="answer-2" border="0">
<tr>
<td><input id="answer-2_0" type="radio" name="answer-2" value="1" /><label for="answer-2_0">Yes</label></td><td><input id="answer-2_1" type="radio" name="answer-2" value="0" /><label for="answer-2_1">No</label></td>
</tr>
</table></td>
</tr>
</table>
Now I am using the following code in my JavaScript to validate the radio button's checked state.
var tblQuestionBoard=document.getElementById("tblQuestions");
tblAnswer = tblQuestionBoard.rows[1].childNodes[0].childNodes[0]
Now tblAnswer should be an object having the Table with id "answer-1"
In IE, I am getting it. But in Mozilla and rest of the browsers I am getting it as undefined.
How to solve this?
It's because you're using childNodes and whitespaces in the DOM are considered to be text nodes by Firefox et. al but not IE
See this answer for an explanation
My suggestions
1.Set up some wrapper functions that ignore any nodeType other than 1 (ELEMENT_NODE) to do DOM traversing. Something like
function child(elem, index) {
// if index is not supplied, default is 1
// you might be more comfortable making this 0-based
// in which case change i initial assignment value to 0 too
index = index || 1;
// get first child element node of elem
elem = (elem.firstChild && elem.firstChild.nodeType != 1) ?
next(elem.firstChild) :
elem.firstChild;
// use the index to move to nth-child element node
for(var i=1; i < index;i++) {
(function() {
return elem = next(elem);
})();
}
return elem;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
and use like so - Working Demo - (Code at the bottom of the answer for reference)
<table id="myTable">
<thead>
...
</thead>
<tbody>
...
</tbody>
</table>
<script type="text/javascript">
child(document.getElementById('myTable'), 2); // will get the tbody
</script>
2.Use getElementbyId(), getElementsByTagName() or getElementsByName() instead of relying on position in the DOM
3.Use a JavaScript library that abstracts away browser differences (jQuery comes highly recommended)
The Demo Code
<!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" xml:lang="en" lang="en">
<head>
<script type="text/javascript">
window.onload = function() {
document.getElementById('getCellContents').onclick = getCellContents;
}
function child(elem, index) {
index = index || 1;
elem = (elem.firstChild && elem.firstChild.nodeType != 1) ?
next(elem.firstChild) :
elem.firstChild;
for(var i=1; i < index;i++) {
(function() {
return elem = next(elem);
})();
}
return elem;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
function getCellContents() {
var row = parseInt(document.getElementById('row').value, 10);
var column = parseInt(document.getElementById('column').value, 10);
var result;
var color;
var table = document.getElementById('table');
var cells = table.getElementsByTagName('td');
for (var i= 0; i < cells.length; i++) {
(function() {
cells[i].bgColor = '#ffffff';
})();
}
if (row && column) {
var tbody = child(table , 2);
var selectedRow = (row <= tbody.getElementsByTagName("tr").length)? child(tbody, row): null;
var selectedCell = (selectedRow && column <= selectedRow.getElementsByTagName("td").length)? child(selectedRow, column): null;
if (selectedRow && selectedCell) {
selectedCell.bgColor = '#00ff00';
result = selectedCell.innerHTML;
color = '#b7b7b7';
}
else {
result = 'Cell does not exist';
color = '#ff0000';
}
}
else {
result = 'You must provide numeric arguments for Row and Column Number';
color = '#ff0000';
}
var results = document.getElementById('results');
results.innerHTML = result;
results.style.color = color;
}
</script>
<title>DOM Traversal</title>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<style type="text/css">
body {
font-family: Verdana, Helvetica, Arial;
font-size: 0.8em;
}
h2 {
text-align:center;
}
table {
border: 1px solid #000;
border-collapse: collapse;
}
th, td {
border: 1px solid #000;
padding: 2px;
}
fieldset {
border: 0;
}
label {
display: block;
width: 120px;
text-align: right;
float: left;
padding-right: 10px;
margin: 5px 0;
}
input {
margin: 5px 0;
}
input.text {
padding: 0 0 0 3px;
width: 172px;
}
input.button {
margin: 15px 0 0 130px;
}
span {
font-weight: bold;
color: #b7b7b7;
}
</style>
</head>
<body>
<h2>Example to demonstrate use of JavaScript DOM traversing wrapper functions</h2>
<div style="margin: 0 auto; width: 600px;">
<fieldset>
<label for="row">Row Number:</label><input id="row" class="text" type="text" /><br/>
<label for="column">Column Number:</label><input id="column" class="text" type="text" /><br/>
<input id="getCellContents" type="button" class="button" value="Get Cell Contents" />
</fieldset>
<p>Results: <span id="results"></span></p>
<table id="table">
<thead>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
<th>Column 4</th>
<th>Column 5</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banana</td>
<td>Apple</td>
<td>Orange</td>
<td>Pineapple</td>
<td>Cranberry</td>
</tr>
<tr>
<td>Monkey</td>
<td>Giraffe</td>
<td>Elephant</td>
<td>Tiger</td>
<td>Snake</td>
</tr>
<tr>
<td>C#</td>
<td>Java</td>
<td>Python</td>
<td>Ruby</td>
<td>Haskell</td>
</tr>
<tr>
<td>France</td>
<td>Spain</td>
<td>Italy</td>
<td>Germany</td>
<td>Netherlands</td>
</tr>
</tbody>
</table>
<p style="font-weight:bold;">The Code:
<pre><code>
<script type="text/javascript">
window.onload = function() {
document.getElementById('getCellContents').onclick = getCellContents;
}
function child(elem, index) {
index = index || 1;
elem = (elem.firstChild && elem.firstChild.nodeType != 1) ?
next(elem.firstChild) :
elem.firstChild;
for(var i=1; i < index;i++) {
(function() {
if(elem)
return elem = next(elem);
})();
}
return elem;
}
function next(elem) {
do {
elem = elem.nextSibling;
} while (elem && elem.nodeType != 1);
return elem;
}
function getCellContents() {
var row = parseInt(document.getElementById('row').value, 10);
var column = parseInt(document.getElementById('column').value, 10);
var result;
var color;
var table = document.getElementById('table');
var cells = table.getElementsByTagName('td');
for (var i= 0; i < cells.length; i++) {
(function() {
cells[i].bgColor = '#ffffff';
})();
}
if (row && column) {
var tbody = child(table , 2);
var selectedRow = (row <= tbody.getElementsByTagName("tr").length)?
child(tbody, row): null;
var selectedCell = (selectedRow && column <= selectedRow.getElementsByTagName("td").length)?
child(selectedRow, column): null;
if (selectedRow && selectedCell) {
selectedCell.bgColor = '#00ff00';
result = selectedCell.innerHTML;
color = '#b7b7b7';
}
else {
result = 'Cell does not exist';
color = '#ff0000';
}
}
else {
result = 'You must provide numeric arguments for Row and Column Number';
color = '#ff0000';
}
var results = document.getElementById('results');
results.innerHTML = result;
results.style.color = color;
}
</script>
</code>
</pre>
</p>
</div>
</body>
</html>