We Keep Coding

Changing a <td> while selected, and reverting the changes after a different <td> is selected?

I am building a table and I want the background color of the selected cell to change. Then when i select a different cell (and apply the same change to this new cell), I want the change to revert in the first (no longer selected) cell. What is the best approach to this? Here is my code:
var table = '';
for (var r = 0; r < rows; r++) {
table += '<tr>';
for (var c = 0; c < cols; c++) {
if (c == 0) {
if (r == 0) {
var cellID = r.toString();
cellID += letterArray[c - 1];
table += '<td style="min-width:50px; height:25px;">' + '</td>';
}
else {
var cellID = r.toString();
cellID += letterArray[c - 1];
table += '<td style="min-width:50px; height:25px">' + r + '</td>';
}
}
else if (r == 0 && c > 0) {
var cellID = r.toString();
cellID += letterArray[c - 1];
table += '<td style="min-width:50px; height:25px">' + letterArray[c - 1] + '</td>';
}
else {
var cellID = r.toString();
cellID += letterArray[c - 1];
table += '<td id="' + cellID + '" style="min-width:50px; height:25px;" onclick="selectCell(this)">' + '</td>';
}
}
table += '</tr>';
}
Writing the table to the document:
document.write('<table id="table" border=1>' + table + '</table>');
selectCell function:
function selectCell(x) {
alert("Row = " + x.parentNode.rowIndex + " Col = " + String.fromCharCode((x.cellIndex - 1) + 65));
x.style.backgroundColor = 'purple';
}
This is where i encounter my problem. As I click the first cell, my alert shows me the info of which cell i have selected, and then changes the background color. Then when i select a different cell, it alerts me with the new cell row and column info, and changes the color.
What is the best way to revert the color change of the previously selected cell?
Thank you for your time and energy!

You should make a CSS class that applies the background color and add/remove it in your function. Your function can check for an element that already has the class, like this:
CSS:
.selected {
background-color: purple;
}
JS:
function selectCell(x) {
var currentSelection = document.querySelector('.selected');
if (currentSelection) {
currentSelection.classList.remove('selected');
}
x.classList.add('selected');
}

I agree with #Rishat Muhametshin that you should avoid using document.write. And I liked how #skyline3000 solved it so I put everything together into a snippet for you to see a cleaner way to code this.
I even went so far as to give you true headers on the top and the side and then added extra CSS to make them look more like headers.
var rows = 7;
var cols = 8;
var table = document.createElement('table');
var selecedTd;
table.id = "table";
table.border = 1;
table.cellSpacing = 0;
table.cellPadding = 4;
document.body.appendChild(table);
for (var r = 0; r < rows; r++) {
var tr = document.createElement('tr');
if (r > 0) {
tr.id = "row"+r;
}
table.appendChild(tr);
for (var c = 0; c < cols; c++) {
var cell;
var char = String.fromCharCode(c+64);
if (c===0 || r===0) {
cell = document.createElement('th');
cell.setAttribute('style', 'min-width:50px; height:25px;');
} else {
cell = document.createElement('td');
}
tr.appendChild(cell);
if (c == 0 && r > 0) {
cell.textContent = r;
}
else if (r == 0) {
if (c > 0) {
cell.textContent = char
cell.id = "col"+c;
}
}
else {
cell.id = r+char;
cell.addEventListener('click', selectCell);
//cell.textContent = cell.id;
}
}
}
function selectCell(event) {
var x = event.target;
var currentSelection = document.querySelector('.selected');
if (currentSelection) {
currentSelection.classList.remove('selected');
}
x.classList.add('selected');
}
.selected {
background-color: purple;
color: white;
}
th {
background-color: #DDD;
}
td {
cursor: pointer;
}
UPDATE
Below is code that will allow editing of the selected field. It needs work before it could be used in production and you would want to save the data in some array or object as well as in the cells, but it should get you going.
var rows = 7;
var cols = 8;
var table = document.createElement('table');
var selecedTd;
var inputField = document.createElement('input');
table.id = "table";
table.border = 1;
table.cellSpacing = 0;
table.cellPadding = 4;
document.body.appendChild(table);
inputField.className = "roving-input";
for (var r = 0; r < rows; r++) {
var tr = document.createElement('tr');
if (r > 0) {
tr.id = "row"+r;
}
table.appendChild(tr);
for (var c = 0; c < cols; c++) {
var cell;
var char = String.fromCharCode(c+64);
if (c===0 || r===0) {
cell = document.createElement('th');
} else {
cell = document.createElement('td');
}
tr.appendChild(cell);
if (c == 0 && r > 0) {
cell.textContent = r;
}
else if (r == 0) {
if (c > 0) {
cell.textContent = char
cell.id = "col"+c;
}
}
else {
cell.id = r+char;
cell.addEventListener('click', selectCell);
cell.textContent = cell.id;
}
}
}
function selectCell(event) {
var x = event.target;
var currentSelection = document.querySelector('.selected');
if (x !== currentSelection && x.localName === 'td') {
if (currentSelection) {
currentSelection.textContent = inputField.value;
currentSelection.classList.remove('selected');
}
x.classList.add('selected');
inputField.value = x.textContent;
x.appendChild(inputField);
inputField.style.width = (x.clientWidth-2)+'px';
inputField.focus();
inputField.select();
}
}
.selected {
position: relative;
}
th {
background-color: #DDD;
height:25px;
min-width:50px;
}
td {
cursor: pointer;
}
.roving-input {
background-color: #FDF;
border: none;
bottom: 0;
display: inline-block;
left: 0;
outline: none;
position:absolute;
right: 0;
top: 0;
}

Saving two sets of coordinates using event Click Handlers

What I've done: So I am creating a game of chess in Java Script, and I have an 8 by 8 board (html table) with pieces on the board. I have currently set up some Click Handlers to recognize what board spot the user has clicked on (each td has its own id 0-63, and using this.cellIndex and .rowIndex I can get the coordinates).
Problem: My code so far is working but I'm currently trying to figure out how to save two separate user inputs (one selecting the coordinates of the where the piece currently is, and the second where the user wants the piece to go). My idea was to pass the variable cellContent as a parameter from "selectPiece()" to "movePiece()" so that I could have both variables in the same funciton but I can't seem to get it to work. Any suggestions or other ideas?
My Code:
function addClickHandlers() {
var cells = document.getElementsByTagName("td");
for (var i = 0; i< cells.length; i++) {
cells[i].onclick = function selectPiece() {
var coordinates = document.getElementById("coordinates");
var col = this.cellIndex
var row = this.parentNode.rowIndex;
var thisCell = this.id;
var cellContent = document.getElementById(thisCell).innerHTML;
document.getElementById(this.id).style.backgroundColor = "blue";
var cells = document.getElementsByTagName("td");
for (var i = 0; i< cells.length; i++) {
cells[i].onclick = function movePiece() {
var coordinates = document.getElementById("coordinates");
var col = this.cellIndex
console.log(this.cellIndex);
var row = this.parentNode.rowIndex;
console.log(this.id);
var thisCell = this.id;
var cellContent = document.getElementById(thisCell).innerHTML;
console.log(cellContent);
document.getElementById(this.id).style.backgroundColor = "red";
};
}
var postCoordinates = document.createTextNode("You clicked on coordinates: (" + row + "," + col + ").");
coordinates.appendChild(postCoordinates);
var br = document.createElement("br");
coordinates.appendChild(br);
};
}
}
Snippet
function showBoard() {
var tr;
var td;
var check;
var i = 0;
var j = 0;
var cellId = 0;
var table = document.getElementById("myTable");
for(i = 0; i < 8; i++) {
tr = table.insertRow(i);
for(j = 0; j < 8; j++) {
td = tr.insertCell(j);
if(i%2 == 1)
{
if(j%2 == 1)
{
td.setAttribute("class", "black");
}
else
{
td.setAttribute("class", "white");
}
}
else
{
if(j%2 == 1)
{
td.setAttribute("class", "white");
}
else
{
td.setAttribute("class", "black");
}
}
cellId = (i * 8) + j;
td.setAttribute("id", cellId);
var content = getSquare(i, j);
if (content == "br") {
var blackRook = document.createElement("IMG");
blackRook.setAttribute("src", "chess-piece-black-rook.png");
td.appendChild(blackRook);
}
else if (content == "bk") {
var blackKnight = document.createElement("IMG");
blackKnight.setAttribute("src", "chess-piece-black-knight.png");
td.appendChild(blackKnight);
}
else if (content == "bb") {
var blackBishop = document.createElement("IMG");
blackBishop.setAttribute("src", "chess-piece-black-bishop.png");
td.appendChild(blackBishop);
}
else if (content == "bK") {
var blackKing = document.createElement("IMG");
blackKing.setAttribute("src", "chess-piece-black-king.png");
td.appendChild(blackKing);
}
else if (content == "bQ") {
var blackQueen = document.createElement("IMG");
blackQueen.setAttribute("src", "chess-piece-black-queen.png");
td.appendChild(blackQueen);
}
else if (content == "bp") {
var blackPawn = document.createElement("IMG");
blackPawn.setAttribute("src", "chess-piece-black-pawn.png");
td.appendChild(blackPawn);
}
else if (content == "wr") {
var whiteRook = document.createElement("IMG");
whiteRook.setAttribute("src", "chess-piece-white-rook.png");
td.appendChild(whiteRook);
}
else if (content == "wk") {
var whiteKnight = document.createElement("IMG");
whiteKnight.setAttribute("src", "chess-piece-white-knight.png");
td.appendChild(whiteKnight);
}
else if (content == "wb") {
var whiteBishop = document.createElement("IMG");
whiteBishop.setAttribute("src", "chess-piece-white-bishop.png");
td.appendChild(whiteBishop);
}
else if (content == "wK") {
var whiteKing = document.createElement("IMG");
whiteKing.setAttribute("src", "chess-piece-white-king.png");
td.appendChild(whiteKing);
}
else if (content == "wQ") {
var whiteQueen = document.createElement("IMG");
whiteQueen.setAttribute("src", "chess-piece-white-queen.png");
whiteQueen.setAttribute("id", "botImg");
td.appendChild(whiteQueen);
}
else if (content == "wp") {
var whitePawn = document.createElement("IMG");
whitePawn.setAttribute("src", "chess-piece-white-pawn.png");
td.appendChild(whitePawn);
}
}
}
addClickHandlers();
}
function addClickHandlers() {
var cells = document.getElementsByTagName("td");
for (var i = 0; i< cells.length; i++) {
cells[i].onclick = function selectPiece() {
var coordinates = document.getElementById("coordinates");
var col = this.cellIndex
console.log(this.cellIndex);
var row = this.parentNode.rowIndex;
console.log(this.id);
var thisCell = this.id;
var cellContent = document.getElementById(thisCell).innerHTML;
console.log(cellContent);
document.getElementById(this.id).style.backgroundColor = "blue";
var cells = document.getElementsByTagName("td");
for (var i = 0; i< cells.length; i++) {
cells[i].onclick = function movePiece() {
var coordinates = document.getElementById("coordinates");
var col = this.cellIndex
console.log(this.cellIndex);
var row = this.parentNode.rowIndex;
console.log(this.id);
var thisCell = this.id;
var cellContent = document.getElementById(thisCell).innerHTML;
console.log(cellContent);
document.getElementById(this.id).style.backgroundColor = "red";
};
}
var postCoordinates = document.createTextNode("You clicked on coordinates: (" + row + "," + col + ").");
coordinates.appendChild(postCoordinates);
var br = document.createElement("br");
coordinates.appendChild(br);
};
}
}
//Game state variables
var grid = [[ "br", "bk", "bb", "bK", "bQ", "bb", "bk", "br" ],
[ "bp", "bp", "bp", "bp", "bp", "bp", "bp", "bp" ],
[ " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " " ],
[ " ", " ", " ", " ", " ", " ", " ", " " ],
[ "wp", "wp", "wp", "wp", "wp", "wp", "wp", "wp" ],
[ "wr", "wk", "wb", "wK", "wQ", "wb", "wk", "wr" ]];
var turn = 7;
var capturedWhite = [];
var capturedBlack = ["bp"];
var gameOver = false;
//Game state functions
function getSquare(row, col) {
return grid[row][col];
}
function pawnMove(start, finish)
{
}
table {
background-color: black;
}
td.white {
height: 65px;
width: 65px;
background-color: white;
}
td.black {
height: 65px;
width: 65px;
background-color: black;
hover {
background-color: white;
}
}
img {
height: 45px;
width: 45px;
padding: 10px;
}
td:hover {
background-color: blue;
}
body {background: #cba;}
#botDiv {position: relative; bottom: 0; left: 0; height: 65;}
#botImg {position: relative; bottom: 0; left: 0;}
<!DOCTYPE html>
<html>
<head>
<title>Game Grid</title>
<link rel="stylesheet" href="gameGridStyle.css">
</head>
<body onload="showBoard();">
<div id="botDiv">
</div>
<script src = "genTable.js"></script>
<script src = "model.js"></script>
<script src = "queenBot.js"></script>
<script src = "loadGame.js"></script>
<table id="myTable">
</table>
<p id="coordinates">
</p>
<label>Here is your user data: </label>
<div id="username"></div><br>
<div id="timestamp"></div>
<button id="logoutButton" onclick="logout()">Log-out</button><br><hr>
<div id="loadDataDiv"></div>
<button id="loadGame" onclick="loadData()">Load Game</button><br><hr>
</body>
</html>

Add onclick event to individual divs within loop

I am making a tic-tac-toe game.
I would like to add individual onclick event to each div so I can add either an "X" or an "O" depending on the div I click. "O" will be added later.
JavaScript:
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
document.body.appendChild(d);
//Stuck here -borrowed some of this from a similar topic-
d.onclick = function() {
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
}
}(i);
//-------------------------------------------------
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
html: <body onload="createDivs()">

Pass d as argument and accept it as argument so that closure will remember it when click handler-function will be executed.
d is nothing but the element you are creating(var d = document.createElement("DIV");)
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function(d) {
//----------------^^^ Accept d here
return function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
d.appendChild(p);
d.onclick = function() {}; //Unset function after click event
}
}(d);
//^^ Pass d here
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
div {
width: 30px;
height: 30px;
border: 1px solid black;
}
<body onload="createDivs()">
Update: As suggested by Barmar in comments, value of this in the event-handler function will be the element on which event registered.
function createDivs() {
for (i = 0; i < 9; i++) {
var d = document.createElement("DIV");
d.style.float = 'left';
document.body.appendChild(d);
d.onclick = function() {
var p = document.createElement("P");
var x = document.createTextNode("X");
p.appendChild(x);
this.appendChild(p);
this.onclick = function() {}; //Unset function after click event
};
var ii = document.createAttribute("id");
ii.value = "D" + i;
d.setAttributeNode(ii);
var z = "D" + i;
if (i == 3 || i == 6) {
document.getElementById(z).style.clear = "left";
}
}
}
div {
width: 30px;
height: 30px;
border: 1px solid black;
}
<body onload="createDivs()">

How do I change an HTML table cell value by a dynamically added button in each row

var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
var table = document.getElementById('insertfirsttable'),
itemType = prompt("Enter the Item type"),
filling1 = prompt("Enter the filling"),
filling2 = prompt("Enter the filling"),
filling3 = prompt("Enter the filling"),
stock = prompt("Enter the amount in stock"),
minimum_Stock = prompt("Enter the stock minimum");
for (var r = 0; r < 1; r += 1) {
var x = document.getElementById('insertfirsttable').insertRow(r);
for (var c = 0; c < 10; c += 1) {
var y = x.insertCell(c);
}
table.rows[r].cells[0].innerHTML = itemType;
table.rows[r].cells[1].innerHTML = filling1;
table.rows[r].cells[2].innerHTML = filling2;
table.rows[r].cells[3].innerHTML = filling3;
table.rows[r].cells[4].innerHTML = stock;
table.rows[r].cells[5].innerHTML = minimum_Stock;
table.rows[r].cells[9].style.width = "100px";
var CreateBtn = document.createElement("button");
CreateBtn.innerHTML = "sell";
CreateBtn.id = "sellbtn";
CreateBtn.style.width = "100px";
CreateBtn.style.height = "25px";
CreateBtn.style.cursor = "pointer";
CreateBtn.style.fontSize = "18px";
table.rows[r].cells[9].appendChild(CreateBtn);
var sellBtn = document.getElementById("sellbtn");
CreateBtn.onclick = function Sell() {
var sell = prompt("Enter the amount of stock you're selling");
for (var a = 0; a < table.length; a += 1) {
for (var b = 0; b < table.cells.length; b += 1) {
}
}
table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
}
}
});
body {
margin: 0;
padding: 0;
background-color: #E6E6E6;
font-size: 20px;
}
table {
border-spacing: 1px;
width: 100%;
}
th {
padding: 1px;
}
#firsttablediv {
width: 100%;
}
#firsttable {
color: white;
background-color: green;
}
#insertitem {
width: 100%;
padding: 2px;
font-size: 20px;
cursor: pointer;
}
#insertfirsttable > tr {
background-color: #31B404;
}
<html>
<body>
<div id="firsttablediv">
<table id="firsttable" border="1">
<thead>
<th>Item Type</th>
<th colspan="3">Filling</th>
<th>Stock</th>
<th>Stock Minimum</th>
<th>Closing Inventory</th>
<th>Sell</th>
<th>Last Month Inventory</th>
<th colspan="2">
<button id="insertitem">New Item</button>
</th>
</thead>
<tbody id="insertfirsttable">
</tbody>
</table>
</div>
</body>
</html>
When I press on the sell button (which is dynamically added by JavaScript to each row when an item is added)
I want it to ask me about the amount I want to sell of that item and then when I enter the amount it should subtract the stock amount from the amount I want to sell (the one entered previously) and then update the stock amount in the cell of that item's row to the new number.
It's pretty simple but I just can't figure it out.

Change this line:
table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
to this line:
this.parentNode.parentNode.cells[4].innerHTML = parseInt(this.parentNode.parentNode.cells[4].innerHTML) - sell;
To do it like you're trying, you would have to use a closure. This way, when you click a button, it adjusts the value of the button's parent's (td) parent (tr) cell 4.

Is that what you want? (fiddle)
var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
var table = document.getElementById('insertfirsttable'),
itemType = prompt("Enter the Item type"),
filling1 = prompt("Enter the filling"),
filling2 = prompt("Enter the filling"),
filling3 = prompt("Enter the filling"),
stock = prompt("Enter the amount in stock"),
minimum_Stock = prompt("Enter the stock minimum");
for (var r = 0; r < 1; r += 1) {
var x = document.getElementById('insertfirsttable').insertRow(r);
for (var c = 0; c < 10; c += 1) {
var y = x.insertCell(c);
}
table.rows[r].cells[0].innerHTML = itemType;
table.rows[r].cells[1].innerHTML = filling1;
table.rows[r].cells[2].innerHTML = filling2;
table.rows[r].cells[3].innerHTML = filling3;
table.rows[r].cells[4].innerHTML = stock;
table.rows[r].cells[5].innerHTML = minimum_Stock;
table.rows[r].cells[9].style.width = "100px";
var CreateBtn = document.createElement("button");
CreateBtn.innerHTML = "sell";
CreateBtn.id = "sellbtn";
CreateBtn.style.width = "100px";
CreateBtn.style.height = "25px";
CreateBtn.style.cursor = "pointer";
CreateBtn.style.fontSize = "18px";
table.rows[r].cells[9].appendChild(CreateBtn);
var sellBtn = document.getElementById("sellbtn");
CreateBtn.onclick = function Sell() {
var sell = prompt("Enter the amount of stock you're selling");
for (var a = 0; a < table.length; a += 1) {
for (var b = 0; b < table.cells.length; b += 1) {
}
}
table.rows[a].cells[4].innerHTML = parseInt(table.rows[a].cells[4].innerHTML) - sell;
table.rows[a].cells[7].innerHTML = (parseInt(table.rows[a].cells[7].innerHTML)) ? parseInt(table.rows[a].cells[7].innerHTML) + parseInt(sell) : sell;
}
}
});
body {
margin: 0;
padding: 0;
background-color: #E6E6E6;
font-size: 20px;
}
table {
border-spacing: 1px;
width: 100%;
}
th {
padding: 1px;
}
#firsttablediv {
width: 100%;
}
#firsttable {
color: white;
background-color: green;
}
#insertitem {
width: 100%;
padding: 2px;
font-size: 20px;
cursor: pointer;
}
#insertfirsttable > tr {
background-color: #31B404;
}
<html>
<body>
<div id="firsttablediv">
<table id="firsttable" border="1">
<thead>
<th>Item Type</th>
<th colspan="3">Filling</th>
<th>Stock</th>
<th>Stock Minimum</th>
<th>Closing Inventory</th>
<th>Sell</th>
<th>Last Month Inventory</th>
<th colspan="2">
<button id="insertitem">New Item</button>
</th>
</thead>
<tbody id="insertfirsttable">
</tbody>
</table>
</div>
</body>
</html>

var rowCount =0; // add a counter for your row
var insert = document.getElementById('insertitem');
insert.addEventListener('click', function() {
rowCount++; // increase row counter
var table = document.getElementById('insertfirsttable'),
itemType = prompt("Enter the Item type"),
filling1 = prompt("Enter the filling"),
filling2 = prompt("Enter the filling"),
filling3 = prompt("Enter the filling"),
stock = prompt("Enter the amount in stock"),
minimum_Stock = prompt("Enter the stock minimum");
for (var r = 0; r < 1; r += 1) {
var x = document.getElementById('insertfirsttable').insertRow(r);
for (var c = 0; c < 10; c += 1) {
var y = x.insertCell(c);
}
table.rows[r].cells[0].innerHTML = itemType;
table.rows[r].cells[1].innerHTML = filling1;
table.rows[r].cells[2].innerHTML = filling2;
table.rows[r].cells[3].innerHTML = filling3;
table.rows[r].cells[4].innerHTML = stock;
table.rows[r].cells[4].id = "stock_"+rowCount; // add an id to your cell
table.rows[r].cells[5].innerHTML = minimum_Stock;
table.rows[r].cells[7].id = "sell_"+rowCount;
table.rows[r].cells[7].innerHTML = "0";
table.rows[r].cells[9].style.width = "100px";
var CreateBtn = document.createElement("button");
CreateBtn.innerHTML = "sell";
CreateBtn.id = "sellbtn";
CreateBtn.title = rowCount; // add title to your button to have the row counter
CreateBtn.style.width = "100px";
CreateBtn.style.height = "25px";
CreateBtn.style.cursor = "pointer";
CreateBtn.style.fontSize = "18px";
table.rows[r].cells[9].appendChild(CreateBtn);
var sellBtn = document.getElementById("sellbtn");
CreateBtn.onclick = function Sell() {
var sell = prompt("Enter the amount of stock you're selling");
stock_cell = document.getElementById("stock_"+this.title); // find the stock cell with row counter
sell_cell = document.getElementById("sell_"+this.title);
stock_item = parseInt(stock_cell.innerHTML); // get the current value
sell_item = parseInt(sell_cell.innerHTML);
stock_cell.innerHTML = stock_item - parseInt(sell); // increase sell item from stock
sell_cell.innerHTML = sell_item + parseInt(sell);
}
}

passing parameter dynamically in javascript to a button event

I have a function that addRow to a table
function addRow(tableId,rowEle)
{
var tab = document.getElementById(tableId);
var hrow = tab.insertRow();
var func = null;
for (var j = 0; j < rowEle.length; j++) {
var newTD = document.createElement("TD");
var elem = document.createElement(rowEle[j].desc);
elem.type = rowEle[j].type;
elem.type == "button" ? elem.value = rowEle[j].label : false;
rowEle[j].action != undefined ? elem.setAttribute(rowEle[j].action[0],rowEle[j].action[1]): false;
elem.style = rowEle[j].cssStyle;
newTD.appendChild(elem);
hrow.appendChild(newTD);
}
}
and my declaration looks like this
var eobject = new Object();
eobject.desc = "input";
eobject.type = "button";
eobject.label = "+";
eobject.action = new Array("onclick","addRow('tbl1',eleme)");
eobject.cssStyle = "width : 100%; border: 0px none; background-color:lightgreen;";
eleme.push(eobject);
** My Working Solution **
Thanks everyone for your help.