addRowToTable - Dev Articles

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

July 15th, 2005, 03:53 PM

CeCi

Registered User

Join Date: Apr 2004

Posts: 11

Time spent in forums: 2 h 6 m 33 sec
Reputation Power: 0

addRowToTable

Need to create more than one TD Cell. The code below only creates One(well 2) but I need more than that. Any idea how to add more CElls? Thanks.

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<script language="javascript">
// Last updated 2005-05-26
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('id', 'txtRow' + iteration);
el.setAttribute('size', '40');
el.onkeypress = keyPressTest;
cellRight.appendChild(el);
}
function keyPressTest(e, obj)
{
var validateChkb = document.getElementById('chkValidateOnKeyPress');
if (validateChkb.checked) {
var displayObj = document.getElementById('spanOutput');
var key;
if(window.event) {
key = window.event.keyCode;
}
else if(e.which) {
key = e.which;
}
var objId;
if (obj != null) {
objId = obj.id;
} else {
objId = this.id;
}
displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);
}
}

</script>

</head>
<body>
<form action="tableaddrow_nw.html" method="get">
<p>
<input type="button" value="Add" onclick="addRowToTable();" />
<p>
<input type="checkbox" id="chkValidateOnKeyPress" checked="checked" /> Display OnKeyPress
<span id="spanOutput" style="border: 1px solid #000; padding: 3px;"> </span>
</p>
<table border="1" id="tblSample">
<tr>
<th colspan="2">Sample table</th>
</tr>
<tr>

<td>1</td>
<td><input type="text" name="txtRow1"
id="txtRow1" size="40" onkeypress="keyPressTest(event, this);" /></td>
</tr>
</table>
</form>

</body>
</html>

July 18th, 2005, 08:13 AM

MadCowDzz

I'm Internet Famous

Dev Articles Frequenter (2500 - 2999 posts)

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

Using your code, I made this:

Code:

function addRowsToTable(n)
{
	for (var i=0; i<n; i++) {
		addRowToTable();
	}
}

I used this to test it:

Code:

<div><input type="text" size="4" id="howMany" /><input type="button" value="Add" onclick="addRowsToTable(document.getElementById('howMany').  value);" /></div>

July 18th, 2005, 02:48 PM

CeCi

Registered User

Join Date: Apr 2004

Posts: 11

Time spent in forums: 2 h 6 m 33 sec
Reputation Power: 0

can you explain

Hi, thank you for your post.
Just a question: Did you reduce

PHP Code:


		
			
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('id', 'txtRow' + iteration);

el.setAttribute('size', '40');

el.onkeypress = keyPressTest;

cellRight.appendChild(el);

}

function keyPressTest(e, obj)

{

var validateChkb = document.getElementById('chkValidateOnKeyPress');

if (validateChkb.checked) {

var displayObj = document.getElementById('spanOutput');

var key;

if(window.event) {

key = window.event.keyCode; 

}

else if(e.which) {

key = e.which;

}

var objId;

if (obj != null) {

objId = obj.id;

} else {

objId = this.id;

}

displayObj.innerHTML = objId + ' : ' + String.fromCharCode(key);

}

}

TO THIS????

PHP Code:


		
			
function addRowsToTable(n)

{

    for (var i=0; i<n; i++) {

        addRowToTable();

    }

}

Can you explain how does this work?
thanks.

July 20th, 2005, 11:30 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

lol, no no! sorry to confuse.
Your code didn't look to be that bad... afterall, it worked...

AllI did was utilize the fact that you've already written the addRowToTable function.
All I did was make a function, addRowsToTable, to simply loop your function over and over.

You need both functions to be able to add multiple rows.

Your function, addRowToTable(), adds a single row.
My function, addRowsToTable(), calls your function many times.

July 20th, 2005, 04:10 PM

CeCi

Registered User

Join Date: Apr 2004

Posts: 11

Time spent in forums: 2 h 6 m 33 sec
Reputation Power: 0

Hi and thanks for trying to help but I might not have explained well.... I am trying to genearte this on the fly(the one that we have now only creates the first cell):

PHP Code:


		
			
<tr>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

    <td>&nbsp;<input name="" type="text" value=""></td>

  </tr>

Quote:

Originally Posted by MadCowDzz

Using your code, I made this:

Code:

function addRowsToTable(n)
{
	for (var i=0; i<n; i++) {
		addRowToTable();
	}
}

I used this to test it:

Code:

<div><input type="text" size="4" id="howMany" /><input type="button" value="Add" onclick="addRowsToTable(document.getElementById('howMany').  value);" /></div>

July 21st, 2005, 08:06 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

I had assumed you wanted to prompt the user for how many thigns they wanted to add to the list, then generate that many text boxes.... no?

How will you determine how many boxes to display when the page loads?

July 21st, 2005, 10:38 AM

CeCi

Registered User

Join Date: Apr 2004

Posts: 11

Time spent in forums: 2 h 6 m 33 sec
Reputation Power: 0

Quote:

Originally Posted by MadCowDzz

I don't know how its going to work out but I 'might' have a solution. Basically to add another Cell(or column) on each Row all I did was modify the addRowToTaBLE function like this(I am sure there is an easier way to do this but I don't know how):

PHP Code:


		
			
function addRowToTable()

{

  var tbl = document.getElementById('tblID');

  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('id', 'txtRow' + iteration);

  el.setAttribute('size', '');

  el.onkeypress = keyPressTest;

  cellRight.appendChild(el);

    

    //new cell #3

  var cellRight = row.insertCell(2);

  var el2 = document.createElement('input');

  el2.setAttribute('type', 'text');

  el2.setAttribute('name', 'txtRow' + iteration);

  el2.setAttribute('id', 'txtRow' + iteration);

  el2.setAttribute('size', '');

  el2.onkeypress = keyPressTest;

  cellRight.appendChild(el2);    

    

    //new cell #4

  var cellRight = row.insertCell(3);

  var el3 = document.createElement('input');

  el3.setAttribute('type', 'text');

  el3.setAttribute('name', 'txtRow' + iteration);

  el3.setAttribute('id', 'txtRow' + iteration);

  el3.setAttribute('size', '');

  el3.onkeypress = keyPressTest;

  cellRight.appendChild(el3);        

    

    //new cell #5

  var cellRight = row.insertCell(4);

  var el4 = document.createElement('input');

  el4.setAttribute('type', 'text');

  el4.setAttribute('name', 'txtRow' + iteration);

  el4.setAttribute('id', 'txtRow' + iteration);

  el4.setAttribute('size', '');

  el4.onkeypress = keyPressTest;

  cellRight.appendChild(el4);        

    

    //new cell #5

  var cellRight = row.insertCell(5);

  var el5 = document.createElement('input');

  el5.setAttribute('type', 'text');

  el5.setAttribute('name', 'txtRow' + iteration);

  el5.setAttribute('id', 'txtRow' + iteration);

  el5.setAttribute('size', '');

  el5.onkeypress = keyPressTest;

  cellRight.appendChild(el5);        

    

    //new cell #6

  var cellRight = row.insertCell(6);

  var el6 = document.createElement('input');

  el6.setAttribute('type', 'text');

  el6.setAttribute('name', 'txtRow' + iteration);

  el6.setAttribute('id', 'txtRow' + iteration);

  el6.setAttribute('size', '');

  el6.onkeypress = keyPressTest;

  cellRight.appendChild(el6);    

    

    //new cell #7

  var cellRight = row.insertCell(7);

  var el7 = document.createElement('input');

  el7.setAttribute('type', 'text');

  el7.setAttribute('name', 'txtRow' + iteration);

  el7.setAttribute('id', 'txtRow' + iteration);

  el7.setAttribute('size', '');

  el7.onkeypress = keyPressTest;

  cellRight.appendChild(el7);    

    

    //new cell #8

  var cellRight = row.insertCell(8);

  var el8 = document.createElement('input');

  el8.setAttribute('type', 'text');

  el8.setAttribute('name', 'txtRow' + iteration);

  el8.setAttribute('id', 'txtRow' + iteration);

  el8.setAttribute('size', '');

  el8.onkeypress = keyPressTest;

  cellRight.appendChild(el8);    

}

What do you think?

July 21st, 2005, 10:48 AM

MadCowDzz

I'm Internet Famous

Join Date: Jan 2003

Location: Toronto, Canada

Posts: 2,890

Time spent in forums: 1 Week 16 h 4 m 48 sec
Reputation Power: 8

So long as it performs what you need, I guess it's fine. =)

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread