Dynamic Creation of table

[philin007]

Hi Guys,
Could any one help me out with codes to add rows to a table. Well I
kinda of got the codes from the following site
(http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the
problem is this example only shows input box. Now i have a list that
means a 'select box' for which the value is retrieved from Database and
populated into the select list box. Now according to the example if all
residing in the javascript how am i gng to do that!. For example I have
the default row which has 3 text box, a select box(populated from
database and a delete button). Outside the table i have add row
When i click on add row another row should be created with 3 text box,
a select box and a delete button. all these input box and select box
whould have unique names cas i need to pass them to another page to get
the values.

following is the code that I have written :

-***************************************

<script language="javascript">

//add a new row to the table
function addRow()
{
var tbl = document.getElementById("tblGrid");
var nextRow = tbl.tBodies[0].rows.length;

if (nextRow > 5)
{
return;
}
else
{
//add a row to the rows collection and get a reference to the newly
added row
var newRow = document.all("tblGrid").insertRow();

alert ('nextrow' + nextRow);
var popCal1 = 'javascript:cal1' + nextRow + '.popup();'
var popCal2 = 'javascript:cal2' + nextRow + '.popup();'

var nameBegDt = 'txtBeginDt'+ nextRow
var nameEndDt = 'txtEndDt'+ nextRow
var nameSubTyp = 'selSubTyp'+ nextRow
var nameLeaveAppl = 'txtLeaveAppl'+ nextRow
//add 3 cells (<td>) to the new row and set the innerHTML to contain
text boxes

var oCell = newRow.insertCell();
oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
type='text' SIZE='10' name='" + nameBegDt + "'
onFocus='this.blur();'/><a href='" + popCal1 + "'><img
src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
Pick up the date'></a></TD>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
type='text' SIZE='10' name='" + nameEndDt + "'
onFocus='this.blur();'/><a href='" + popCal2 + "'><img
src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
Pick up the date'></a></TD>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><select
name='"+ nameSubTyp +"' >--Select--<option value='F'></option><option
value='AM'>AM (Half)</option><option value='PM'>PM
(Half)</option><option value='S'>Sat Leave</option><option
value='T'>1.5 days</option></select></TD>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
SIZE='4' maxlength='4' type='text' name='" + nameLeaveAppl + "'></TD>";

oCell = newRow.insertCell();
oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
type='image' src='images/delete.jpg'
onclick='removeRow(this);'/></TD>";

}
}

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var tbl = document.getElementById("tblGrid");
var nextRow = tbl.tBodies[0].rows.length;
alert("here:" + nextRow);

if (nextRow < 3)
{
return;
}
else
{
var oRow = src.parentElement.parentElement;

//once the row reference is obtained, delete it passing in its
rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);
}
}

</script>
****************************************************
can anyone help please.

Thanks in advance

Regards
philip

 

[RobG]

Hi Guys,
Could any one help me out with codes to add rows to a table. Well I
kinda of got the codes from the following site
(http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the

If this is an example of the quality of the code from that site, stop
using it.

problem is this example only shows input box. Now i have a list that
means a 'select box' for which the value is retrieved from Database and
populated into the select list box. Now according to the example if all
residing in the javascript how am i gng to do that!. For example I have
the default row which has 3 text box, a select box(populated from
database and a delete button). Outside the table i have add row
When i click on add row another row should be created with 3 text box,
a select box and a delete button. all these input box and select box
whould have unique names cas i need to pass them to another page to get
the values.

following is the code that I have written :

-***************************************

<script language="javascript">

The language attribute is deprecated (years ago), type is required.

//add a new row to the table

When posting code, use 2 or 4 spaces for indents and manually wrap code
at about 70 characters to prevent wrapping. Allowing auto-wrapping
nearly always introduces more errors.

function addRow()
{
var tbl = document.getElementById("tblGrid");

DOM methods should be tested before use.

var nextRow = tbl.tBodies[0].rows.length;

Why not put the tbody element in the HTML and add the id to that? Then
you'll know you are getting the right table section, rather than just
guessing that you want the first one - what if you later decide to add
a thead element? Or another tbody?

if (nextRow > 5)
{
return;
}
else
{
//add a row to the rows collection and get a reference to the newly
added row
var newRow = document.all("tblGrid").insertRow();

Since you already have a reference to the table stored in the variable
"tbl", there seems little point in gettting it again. Also,
document.all should be included only for support of old IE, not as a
main part of the code. It should be dealt with when you detected
support for getElementById (as should support for insertRow).

The insertRow method requires an argument, either the row index to
insert the row at, or -1 to add it as the last row. In IE, if you
don't include a rowIndex argument, it will add it as the last row. In
other browsers will likey cause an error.

alert ('nextrow' + nextRow);
var popCal1 = 'javascript:cal1' + nextRow + '.popup();'
var popCal2 = 'javascript:cal2' + nextRow + '.popup();'

var nameBegDt = 'txtBeginDt'+ nextRow
var nameEndDt = 'txtEndDt'+ nextRow
var nameSubTyp = 'selSubTyp'+ nextRow
var nameLeaveAppl = 'txtLeaveAppl'+ nextRow
//add 3 cells (<td>) to the new row and set the innerHTML to contain
text boxes

var oCell = newRow.insertCell();

Like insertRow, insertCell must have a cell index value as its argument
(again, IE tollerates no argument and adds the cell as the last cell
but some (most?) other browsers don't).

oCell.innerHTML = "<td align = 'center' bgcolor='#ffffff'><input
type='text' SIZE='10' name='" + nameBegDt + "'
onFocus='this.blur();'/><a href='" + popCal1 + "'><img
src='img/cal.gif' width='16' height='16' border='0' alt='Click Here to
Pick up the date'></a></TD>";

Here you are attempting to use innerHTML to create a TD element as a
child of a TD element. Whatever a particular browser may make of that
will be the result of error correction (and likely different across
browsers).

You can use innerHTML to modify the content of a cell, but never any
component of a table (although you can use it to write an entire
table). The rest of this function is similarly flawed - use DOM
methods to modify the cell, then add the innerHTML if you must - but
DOM methods would be better for that too.


[...]

//deletes the specified row from the table
function removeRow(src)
{
/* src refers to the input button that was clicked.
to get a reference to the containing <tr> element,
get the parent of the parent (in this case case <tr>)
*/
var tbl = document.getElementById("tblGrid");
var nextRow = tbl.tBodies[0].rows.length;
alert("here:" + nextRow);

if (nextRow < 3)
{
return;
}
else
{
var oRow = src.parentElement.parentElement;

Rather than guessing where the TR is, why not have a function that
returns the type of parent you are looking for:

function getParentByTagName(el, tagName){
var p = el.parent;
tagName = tagName.toLowerCase();
(while p && tagName != p.tagName.toLowerCase()){
p = p.parentNode;
}
return p;
}

Then in your function:

var oRow = getParentByTagName(src, 'tr');
if (oRow && oRow.rowIndex > 3){
oRow.parentNode.removeChild(oRow);
}

//once the row reference is obtained, delete it passing in its
rowIndex
document.all("tblGrid").deleteRow(oRow.rowIndex);

You don't need to user document.all (or getElementById) to remove an
element if you already have a reference to the element.

[...]

can anyone help please.

I hope I did.

 

[Dr John Stockton]

JRS: In article <[email protected]>,
dated Mon, 25 Sep 2006 02:27:58 remote, seen in
news:comp.lang.javascript, (e-mail address removed) posted :

Well I
kinda of got the codes from the following site
(http://www.interviewboard.com/DHTMLSamples/DHTMLGridSample.htm) the

Code copied from the Web is usually badly-written.

<script language="javascript">

^^^^^^^^^^^^^^^^^^^^ Deprecated. Use type="text/javascript"

//add a new row to the table
function addRow()

Don't over-indent, especially in News. Two spaces per level is
sufficient. If your news-editor cannot replace tabs globally, ditch it.

{
var tbl = document.getElementById("tblGrid");
var nextRow = tbl.tBodies[0].rows.length;

if (nextRow > 5)
{
return;
}
else

Using else after if () return is pointless.

{
//add a row to the rows collection and get a reference
to the newly
added row

Don't allow your posting agent to wrap code. Code in news should be
directly readable and executable, if you want readers to bother with it.

var newRow = document.all("tblGrid").insertRow();

Using document.all is at best unfashionable. Read FAQ 4.39.



It's a good idea to read the newsgroup and its FAQ. See below.