naming cloned rows in a table javascript

Hi friends,

I am strugging with this problem.I don't know much javascript. Please you gurus can help me.

My problem is I cloned the frist row in a table.after cloning i want to change the names of the cloned cells.In a row i have two select button and three text boxes.

My code is

Expand|Select|Wrap|Line Numbers

 
tabBody = document.getElementById('tblSample').firstChild;

   newRow = tabBody.appendChild(tabBody.firstChild.nextSibling.cloneNode(true));

   rowNum = rowNum + 1;

Please help me

Thank you in advance
priya

Oct 21 '07 #1

Subscribe Post Reply

2239

gits

5,390

Expert Mod 4TB

hi ...

welcome to TSDN ...

i assume you want to rename the textboxes and buttons in your cloned row? ... for that you have to loop through your cloned row. do this before you append it ... use a variable cloned_row for it. now you can do something like the following:

Expand|Select|Wrap|Line Numbers

 var cloned_cells = cloned_row.getElementsByTagName('td');
 
for (var i = 0; i < cloned_cells.length; i++) {

    var cell = cloned_cells[i];

    // here you may retrieve and manipulate the nodes inside 

    // of every cell

}

after that ... append your row.

kind regards

Oct 21 '07 #2

gits

5,390

Expert Mod 4TB

hi ...

ok ... have a look at the following adapted code, that should rename all textboxes (type = "text") and buttons (type = "button") ...

Expand|Select|Wrap|Line Numbers

 
var counter = 0;

var rowNum = 0;
 
function addRowToTable() {

    counter++;
 
    var tabBody = document.getElementById('tblSample').firstChild;

    var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);

    var cloned_cells = cloned_row.getElementsByTagName('td');
 
    for (var i = 0; i < cloned_cells.length; i++) {

        var cell = cloned_cells[i];

        var node_suffix = '_sfx_' + i;
 
        var t = cell.getElementsByTagName('input');
 
        for (var j = 0; j < t.length; j++) {

            var input_node = t[j];
 
            if (input_node.type in { 'text': 1, 'button': 1 }) {

                input_node.name += node_suffix;

            }

        }

    }
 
    tabBody.appendChild(cloned_row);

    rowNum++;

}

kind regards

Oct 21 '07 #3

priyapratheep

Hi Gits,

Thank you for your valuable reply.In my table I am having two select box and three text boxes.I am attaching my program with this.Please help me...

Expand|Select|Wrap|Line Numbers

  
<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

    pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 
<%@page import="java.util.*"%>
 
<html xmlns:v="urn:schemas-microsoft-com:vml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns="http://www.w3.org/TR/REC-html40">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

<link rel="File-List" href="testIndex_files/filelist.xml">
 
<title>Insert title here</title>

<!--[if !mso]>

<style>

v\:*         { behavior: url(#default#VML) }

o\:*         { behavior: url(#default#VML) }

.shape       { behavior: url(#default#VML) }

</style>

<![endif]--><!--[if gte mso 9]>

<xml><o:shapedefaults v:ext="edit" spidmax="1027"/>

</xml><![endif]-->

</head>

<body>
 
<p>&nbsp;</p>

<p align="center"><b><font size="7" face="Monotype Corsiva">New Order</font></b></p>

<form method="get" action="http://localhost:7001/loginProcess/jspPages/tableaddrow_nw.jsp">

  <p align="center">&nbsp;</p>

  <fieldset style="padding: 2">

  <legend>Purchase Order Header</legend>

&nbsp;<div align="center">

    <center>

    <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="75%" id="AutoNumber1">

    <tr>

      <td width="29%" align="right">Purchase Order Number:</td>

      <td width="21%"><input type="text" name="pono" size="20"></td>

      <td width="25%" align="right">P O Date:</td>

      <td width="25%"><input type="text" name="podate" size="20"></td>

    </tr>

    <tr>

      <td width="29%" align="right">Supplier Code:</td>

      <td width="21%"><select size="1" name="D9">

        <option> Supp101</option>

        <option>Supp102</option>

        <option> Supp103</option>

        </select></td>

      <td width="25%" align="right">Reference No:</td>

      <td width="25%"><input type="text" name="refno" size="20"></td>

    </tr>

  </table>

    </center>

  </div>

  <p>&nbsp;</p>

  </fieldset><p align="center"><!--[if gte vml 1]><v:line id="_x0000_s1025"

 style='position:absolute;left:0;text-align:left;top:0;flip:y;z-index:1'

 from="8.25pt,247.5pt" to="747pt,248.25pt"/><![endif]--><![if !vml]><span

style='mso-ignore:vglayout;position:absolute;z-index:1;left:10px;top:329px;

width:987px;height:3px'><img width=987 height=3

src="testIndex_files/image001.gif" v:shapes="_x0000_s1025"></span><![endif]>&nbsp;

  <p align="center">&nbsp;<p>

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

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

<input type="button" value="saveorder" onclick="testing.jsp" />

</p>

<table border="1" id="tblSample" width="774">

  <tr>

      <td width="165" align="center"><b>Model Code</b></td>

      <td width="148" align="center"><b>Color code</b></td>

      <td width="148" align="center"><b>Order Quantity </b> </td>

      <td width="148" align="center"><b>Production Year</b></td>

      <td width="148" align="center"><b>Production Month</b></td>

    </tr>

  <tr>

   <td width="165"><select name="model"> 

            <option> Model1</option>

           <option>Mode22</option>

           <option> Mode33</option>

         </select></td>
 
     <td width="148"><select name="color">

      <option>red</option>

      <option>blue</option>

      <option>black</option>

         </select></td>

      <td width="148" align="center"><input type="text" name="ord_qty" size="20"></td>

      <td width="148" align="center"><input type="text" name="prod_yr" size="20"></td>

      <td width="148" align="center"><input type="text" name="prod_mth" size="20"></td>

    </tr>

</table>

  <p align="center">&nbsp;</p>

  <p align="center">&nbsp;</p>

  <p align="center">

  <input type="submit" value="Save Order" name="saveorder"/>

  <input type="reset" value="Cancel Now" name="cancel"></p>

</form>
 
<script type="text/javascript" src="../javascript/windowOpen.js"></script>
 
<script language="JavaScript" type="text/javascript">

<!--

var counter = 0;

var rowNum =0;

function addRowToTable()

{

  counter++;
 
   tabBody = document.getElementById('tblSample').firstChild;

   newRow = tabBody.appendChild(tabBody.firstChild.nextSibling.cloneNode(true));

   var cloned_cells = cloned_row.getElementsByTagName('td');
 
    for (var i = 0; i < cloned_cells.length; i++) {

       //The problem area

    }
 
}
 
   }
 
function removeRowFromTable()

{

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

  var lastRow = tbl.rows.length;

  if (lastRow > 2) tbl.deleteRow(lastRow - 1);

}

</script>
 
<%!

String suppVal;

String str1;

%>

&nbsp;</body></html>

Once again thank you.

Oct 21 '07 #4

gits

5,390

Expert Mod 4TB

ok ... i just gave the code for your addRowToTable() function above ... simply use that ...

now i overlooked the fact that you didn't have buttons but select-boxes ... i was confused by the term select-buttons ... so we have to do the following:

Expand|Select|Wrap|Line Numbers

 
var counter = 0;

var rowNum = 0;
 
function addRowToTable() {

    counter++;
 
    var tabBody = document.getElementById('tblSample').firstChild;

    var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);

    var cloned_cells = cloned_row.getElementsByTagName('td');
 
    for (var i = 0; i < cloned_cells.length; i++) {

        var cell = cloned_cells[i];

        var node_suffix = '_sfx_' + i;
 
        var t = cell.getElementsByTagName('input');
 
        for (var j = 0; j < t.length; j++) {

            var input_node = t[j];
 
            if (input_node.type == 'text') {

                input_node.name += node_suffix;

            }

        }
 
        var s = cell.getElementsByTagName('select');
 
        for (j = 0; j < s.length; j++) {

            var select_node = s[j];
 
            select_node.name += node_suffix;

        }

    }
 
    tabBody.appendChild(cloned_row);

    rowNum++;

}

kind regards

Oct 21 '07 #5

priyapratheep

Once again thanks a lot git.....

After trying the above code each colum name in a row is changing and rows not...

output is this.

pono=101
podate=12%2F10.1998
D9=Supp101
refno=1001

model=Model1
color=red
ord_qty=10
prod_yr=1998
prod_mth=12

model_sfx_0=Mode22
color_sfx_1=blue
ord_qty_sfx_2=11
prod_yr_sfx_3=1999
prod_mth_sfx_4=13

model_sfx_0=Mode33
color_sfx_1=black
ord_qty_sfx_2=12
prod_yr_sfx_3=2000
prod_mth_sfx_4=14

saveorder=Save+Order

please help me.Sorry for the distrubance.

Oct 21 '07 #6

gits

5,390

Expert Mod 4TB

yes ... :) it was an example ... so could you please try to explain in detail what and to what you want to have it changed?

kind regards

Oct 21 '07 #7

priyapratheep

I want to take the values from this page and store it in a database using EJB .For that i want to take the values in a JSP page to pass ejb.

If the names are different i can take the values in a jsp page using request.getParameter("name of the box");

Actually I tried without using clone method but i want to display the values in the combo boxes (model and color) from the table.So i failed in that procedure also.Then i tried with clone

once again thank your for your valuable reply

Oct 21 '07 #8

gits

5,390

Expert Mod 4TB

so the following little adjustment should do the trick?

Expand|Select|Wrap|Line Numbers

 function addRowToTable() {

    var tabBody = document.getElementById('tblSample').firstChild;

    var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);

    var cloned_cells = cloned_row.getElementsByTagName('td');

    var node_suffix = '_sfx_' + rowNum;
 
    for (var i = 0; i < cloned_cells.length; i++) {

        var cell = cloned_cells[i];
 
        var t = cell.getElementsByTagName('input');
 
        for (var j = 0; j < t.length; j++) {

            var input_node = t[j];
 
            if (input_node.type == 'text') {

                input_node.name += node_suffix;

            }

        }
 
        var s = cell.getElementsByTagName('select');
 
        for (j = 0; j < s.length; j++) {

            var select_node = s[j];
 
            select_node.name += node_suffix;

        }

    }
 
    tabBody.appendChild(cloned_row);

    rowNum++;

}

kind regards

Oct 21 '07 #9

priyapratheep

Hi gits

My problem is almost solved.Thank you

I made a small change in the code

Expand|Select|Wrap|Line Numbers

 
   var tabBody = document.getElementById('tblSample').firstChild;

    var cloned_row = tabBody.firstChild.nextSibling.cloneNode(true);

    var cloned_cells = cloned_row.getElementsByTagName('td');

    var rowcount =tblSample.rows.length;

    for (var i = 0; i < cloned_cells.length; i++) {

        var cell = cloned_cells[i];

        var node_suffix = rowcount ;

Oct 21 '07 #10

gits

5,390

Expert Mod 4TB

glad to hear that ... its the same solution ;) ... post back to the forum anytime you have more questions ...

kind regards

Oct 21 '07 #11

priyapratheep

ok once again thank you

bye

Oct 21 '07 #12

by: Wang, Jay | last post by:

I try to group several rows in a table into a div and show/hide them by click on a button somewhere with a javascript link. When clicked, the link will toggle the style of the div section's style...

Javascript

How do you access rows and columns of a HTML table?

by: anonieko | last post by:

This example applies to javascript, table, cells, rows > > How do you access rows and columns of a HTML table? > > > <script language="javascript"> alert('start');

Javascript

image/row cloning with attached behaviors. clicking cloned image, executes methods on original.

by: sonic | last post by:

Hello, I am cloning a table row which contains images that have behaviors attached to them as well as onclick events. The problem is that the cloned row seems to be executing the...

Javascript

object model, referring to rows

by: jhallbox | last post by:

I am unclear how to test this object I'm sending to my function. It is a cell in a table and I simply want to know which row it is in. I am not a javascript programmer but a javascript cobbler, so...

Javascript

Ordering rows in a table

by: Brendan.Collins | last post by:

Hi I have a javascript problem that has been annoying me for two days now and thought that a javascript expert might have the magic solution. I am populating a table dynamically from the...

Javascript

Hide/Show Rows based on text box input

by: jimstruckster | last post by:

I have a table with 10 rows, I want all rows except for the first to be hidden when the page first opens up. If the user puts a value in a text box in the first row then I want the second row to...

Javascript

add table rows dynamically and scroll

by: leiño | last post by:

Hi, i am adding table rows dynamically with javascript. This works fine. The table is inside a div with scrolls, initially with 6 rows: ..... <div style='overflow:auto; width:100%;...

Javascript

cannot get two scripts to work together - naming conflicts

by: mint89 | last post by:

This is probably a rather easy fix, but I know next to nothing about java. I am attempting to create a page that has two rows of buttons, and I wanted to have some sort of mouseover effect on them. ...

Javascript

Hiding rows from a table populated by a database

by: Fix_Metal | last post by:

Hello all. I'm new to this group :) I have a problem with javascript language. I'm making an .asp page with some integrated Javascript functions. The page consists of some HTML selects and a...

Javascript

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

General

How to turn on java script in a villaon keypad mobile phone

by: Charles Arthur | last post by:

How do i turn on java script on a villaon, callus and itel keypad mobile phone

Java

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Javascript

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

General

Navigating the Data Structures and Algorithms (DSA)

by: BarryA | last post by:

What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...

Algorithms / Advanced Math

How to build RAID in BIOS?

by: Hystou | last post by:

There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

Computer Hardware

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

naming cloned rows in a table javascript

Similar topics