Add and delete rows dynamically to an HTML table .... ?

owen_yuen

02-04-2005, 04:29 AM

The following code is working fine for adding and deleting rows dynamically to an HTML table. But is it a way that dynamic table is generated in Window A, but <Add> and <Delete> button is in Window B. So, I click on button in Window B that it will control the dynamic table in Window A. ...... Is it possible?

<html>
<body>
<script language = javascript>
function addRowToTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode(iteration);
cellLeft.appendChild(textNode);

// right cell
var cellRight = row.insertCell(1);
var el = document.createElement('input');
el.setAttribute('type', 'text');
el.setAttribute('name', 'txtRow' + iteration);
el.setAttribute('size', '40');
cellRight.appendChild(el);
}

function removeRowFromTable()
{
var tbl = document.getElementById('tblSample');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}

</script>

<form action="tableaddrow_nw.html" method="get">

<input type="button" value="Add" onclick="addRowToTable();" />
<input type="button" value="Remove" onclick="removeRowFromTable();" />

<table border="1" id="tblSample">
<tr>
<th colspan="2">Sample table</th>
</tr>
<tr>
<td>1</td>
<td><input type="text" name="txtRow1" size="40" /></td>
</tr>
</table>

</form>
</body>
</html>

hemebond

02-04-2005, 04:51 AM

It is possible, but why would you do that?

owen_yuen

02-04-2005, 05:04 AM

Actually, Dynamic table is generated by database in [WindowA] with <Add> button at the bottom of Window. When user click on <Add> button, new [WindowB] will pop up for user enter new information.

After they finish entering new information, then click <Save> button. Of course, new info will store into database then, New row with the information will be append to the last row of table in [WindowA]

Since it is a long table in [WindowA] & I don't want to refresh the [WindowA] after. So, I decide uisng Javascript InsertRow() function instead.

orhor

02-04-2005, 05:20 AM

to your document add a button:

<input type="button" value="New Window" onClick="javascript: newWindow();">

and a function:
function newWindow(){
window.open('newWin.htm','newW','toolbar=no, directories=no, location=no, status=yes, menubar=no, resizable=no, scrollbars=no, width=300, height=50');
}

in the same directory create new document newWin.htm:

<html>
<head>
<title> New Document </title>

<script language="JavaScript" type="text/javascript">

</script>
</head>

<body>
<input type="button" value="Add" onclick="javascript: add();">
<input type="button" value="Rem" onclick="javascript: rem();">
</body>
</html>

hemebond

02-04-2005, 05:47 AM

Go and learn how to use xmlHttpRequest. You can use it to send and recieve information to and from the server without having to refresh the page. You can then parse this data and append the row.

owen_yuen

02-04-2005, 04:26 PM

From the original code on first post, can anyone tell me how I can make change the row color from white to Yellow after I add a new row?

Thanks

Kor

02-04-2005, 04:46 PM

Try

var row = tbl.insertRow(lastRow);
row.style.backgroundColor='your color';

owen_yuen

02-04-2005, 05:00 PM

KOR: ....... Thanks it works!

At very beginning, I was putting the JS code like following:

var tbl = document.getElementById('tblSample');
tbl.style.backgroundColor='white';
var lastRow = tbl.rows.length;
// if there's no header row in the table, then iteration = lastRow + 1
var iteration = lastRow;
var row = tbl.insertRow(lastRow);

Basscyst

02-04-2005, 05:34 PM

Here is something else you could do with your first situation. May not be nessesary to open a second window. Just had something similar lying around.

<html>
<head>
<script type="text/javascript">

function addRow()
{
var tb=document.createElement('tbody');
var tr=document.createElement('tr');
var td=new Array();
var txt=new Array();
for(var i=0;i<4;i++)
{
txt[i]=document.createElement('input');
txt[i].onblur=function(){saveInput(this);}
td[i]=document.createElement('td');
td[i].appendChild(txt[i]);
tr.appendChild(td[i]);
}
tb.appendChild(tr);
document.getElementById('tbl1').childNodes[document.getElementById('tbl1').childNodes.length-1].appendChild(tb);
}

function saveInput(obj)
{
var str=obj.value;
str=document.createTextNode(str);
obj.parentNode.appendChild(str);
obj.parentNode.onclick=function(){editValue(this);}
obj.parentNode.removeChild(obj);
}
</script>
<style>
th
{
border:solid 1px;
}
td
{
border:solid 1px;
width:150px;
}
</style>
</head>
<body>
<table id="tbl1">
<thead>
<th>H1</th>
<th>H2</th>
<th>H3</th>
<th>H4</th>
</thead>
<tbody>
<tr>
<td>Value</td>
<td>Value</td>
<td>Value</td>
<td>Value</td>
</tr>
</tbody>
</table>
<form>
<input type="button" onclick="addRow();" value="Add Row" />
</body>
</html>

Basscyst

owen_yuen

02-04-2005, 07:00 PM

From the code here

// left cell
var cellLeft = row.insertCell(0);
var textNode = document.createTextNode("<A href=http://www.yahoo.com>Yahoo</a>");
cellLeft.appendChild(textNode);

The Hyper link couldn't show up into the cell except the whole string bringing up. Any function or I have to recode this section....?

THanks

Basscyst

02-04-2005, 08:01 PM

You have to create the anchor first, declare it's property, and append the text node to the anchor:

ie:

var a=document.createElement('a');
a.setAttribute('href','http://www.codingforums.com');
var str=document.CreateTextNode('CodingForums.com');
a.appendChild(str);
cellLeft.appendChild(a);

Basscyst

owen_yuen

02-04-2005, 09:45 PM

It works Great! Thanks for all input!

owen_yuen

02-08-2005, 04:38 PM

var a=document.createElement('a');
a.setAttribute('href','http://www.codingforums.com target=window');
var str=document.CreateTextNode('CodingForums.com');
a.appendChild(str);
cellLeft.appendChild(a);

I add the Target = window, why it not working at all or do I have to set it in other attribute?

Thanks

Kor

02-09-2005, 12:24 PM

a.setAttribute('href','http://www.codingforums.com');
a.setAttribute('target','newwindow');

gahigg

02-23-2005, 12:37 AM