How to modify this function to add the fields in proper way

probir · Dec 2, 2004

Hi Folks,

Could you please help me to resolve the following problem.

Currently I have 5 text fields and 1 button in row of a table. When I'm clicking on the button it's adding another row which contains the same fields. It's working fine. Now, I've to modify the layout a little but want to keep the functionality same. I want to have the first 2 fields under one <tr> </tr> group and the rest (i.e. 3 text fields and the button in another <tr> </tr> group. When I'll click the button it should add all the 5 text fields and the button in the similar way. Could you please have a look into the following code and help me out ?

The Current Working Code ::

File Name :: Probir.jsp
***************************************************
<html>
<head>
<title>New Entry Form</title>
<script>
function add_row()
{
var n = window.event.srcElement;
var nr1 = n.parentNode.parentNode;
var tb = nr1.parentNode;
var nr2 = tb.insertRow();
var num = nr1.childNodes.length;

for (var i = 0; i < num; i++)
{
var nc = nr2.insertCell();
nc.innerHTML = nr1.childNodes.innerHTML;
}
}
</script>
</head>

<body>
<table width="640">
<tr>
<td> <input type="text" name="TEXT_A" /> </td>
<td> <input type="text" name="TEXT_B" /> </td>
<td> <input type="text" name="TEXT_C" /> </td>
<td> <input type="text" name="TEXT_D" /> </td>
<td> <input type="text" name="TEXT_E" /> </td>
<td><input type="button" name="add" value="Add" onclick="add_row()"/></td>
</tr>
</table>
</body>
</html>

***************************************************

I want to change the layout as following ::

***************************************************

<body>
<table width="640">
<tr>
<td> <input type="text" name="TEXT_A" /> </td>
<td> <input type="text" name="TEXT_B" /> </td>
</tr>
<tr>
<td> <input type="text" name="TEXT_C" /> </td>
<td> <input type="text" name="TEXT_D" /> </td>
<td> <input type="text" name="TEXT_E" /> </td>
<td><input type="button" name="add" value="Add" onclick="add_row()"/></td>
</tr>
</table>
</body>

***************************************************

Could anybody help me to modify the function add_row() to achieve this.

Thanks a lot.

cLFlaVA · Dec 2, 2004

this works in ie. i'm still having problems in FF.

Code:

<html>
<head>
<title>New Entry Form</title>
<script>


function addRow(curRowBottom) {
    var curRowTop = curRowBottom.previousSibling;
    var t = curRowTop.parentNode;
    var i;

    var newRowTop = t.insertRow(-1);

    for ( i = 0; i < curRowTop.childNodes.length; i++ ) {
        var c = newRowTop.insertCell(-1);
        c.innerHTML = curRowTop.childNodes[i].innerHTML;
    }

    c.colSpan = 3;

    var newRowBottom = t.insertRow(-1);

    for ( i = 0; i < curRowBottom.childNodes.length; i++ ) {
        c = newRowBottom.insertCell(-1);
        c.innerHTML = curRowBottom.childNodes[i].innerHTML;
    }

}
</script>
</head>

<body>

<form name="f">

<table width="640"><tr>
    <td><input type="text" name="TEXT_A" /></td>
    <td colspan="3"><input type="text" name="TEXT_B" /></td>
</tr><tr>
    <td><input type="text" name="TEXT_C" /> </td>
    <td><input type="text" name="TEXT_D" /> </td>
    <td><input type="text" name="TEXT_E" /> </td>
    <td><input type="button" name="add" value="Add" onclick="addRow(this.parentNode.parentNode)"/></td>
</tr></table>

</form>

</body>

</html>

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

theboyhope · Dec 2, 2004

I think checking that the childNode is actually a TD or TR will help in Mozilla/Firefox.

e.g.

Code:

		if ( curRowTop.childNodes[ i ].tagName == "TD" ) {
        
			var c = newRowTop.insertCell(-1);
			c.innerHTML = curRowTop.childNodes[i].innerHTML;
		
		}

Code:

		if ( curRowBottom.childNodes[ i ].tagName == "TR" ) {

        c = newRowBottom.insertCell(-1);
        c.innerHTML = curRowBottom.childNodes[i].innerHTML;
		}

probir · Dec 2, 2004

Thanks cLFlaVA.

I'm just strating JSP and JavaScript.

One more question :

Let's say TEXT_E is a select Box and I want to show the selected item in TEXT_A field. What is the relation between TEXT_E and TEXT_A ?

TEXT_A = TEXT_E.arentNode.parentNode.previousSibling.childNodes[0] ?

Please help.

cLFlaVA · Dec 2, 2004

like this?

Code:

var a = document.forms['formname'].elements['TEXT_A'];
var e = document.forms['formname'].elements['TEXT_E'];
a.value = e.options[e.selectedIndex].value;

*cLFlaVA
----------------------------
[tt]insert funny quotation here.[/tt]

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

How to modify this function to add the fields in proper way

probir

Programmer

cLFlaVA

Programmer

theboyhope

IS-IT--Management

probir

Programmer

cLFlaVA

Programmer

Similar threads

Part and Inventory Search

Sponsor