Solved

adding and removing table rows

Posted on 2004-09-30
9
525 Views
Last Modified: 2008-10-13
hi


SNO            eno                ename                  sal
1      >>      textbox[1,0]    textbox [1,1]        textbox[1,2]
2      >>      textbox [2,0]   textbox [2,1]        textbox[2,2]
3      >>      textbox [3,0]   textbox[3,1]         textbox [3,2]
4      >>      textbox [4,0]    textbox[4,1]        textbox [4,2]
5      >>      textbox           textbox               textbox
6      >>      textbox           textbox               textbox <<
.
.
.
.

in my application i have to create dynamically adding and removing table rows using javascript

for every row i want remove button (>>)

when the user remove 4th row then 5th row should become 4 SERIAL NUMBER and 6th row should become 5 SERIAL NUMBER;
add row button should be displayed at the last row only;

for example when user adds another row(7th row) ,addrow(<<) should only be displayed at 7th row not at 6th;

i want to give the textbox names as textbox10,textbox11,textbox12...................

when the user removed 3rd row then 4th row textbox names should be textbox30,textbox31,textbox32  not textbox40,textbox41,textbox42;

i hope i explained well;
i think  we can do this using DOM or innerHTML javascript ;which one is better
0
Comment
Question by:chaitu chaitu
  • 4
  • 2
  • 2
  • +1
9 Comments
 
LVL 63

Expert Comment

by:Zvonko
ID: 12188733
In every server side scripting language it is easy to handle multiple values for fields with same name.
That mean, if you have for eno the field name textboxA and for ename the field name textboxB, then you get as much values as there are fields with that same name on the form at the form submit time.

This will dramaticaly simplify the client side row handling and reduce it to output of SNO for user display in a loop at every rows count change.

Or do you have problems handling multiple values with same field name on the server side?
I mean that multiple values siplify scripting also on server side.
What server side scripting language do you use?
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 12188802


 hi

Is it difficult to give unique text names  for each row;
if it is easier for u to give same textbox names then plz post code;
if i give unique text names it will be easier for me to read in the servlet

i will create 2 dimensional array in my servlet if i give unique text names ;
0
 
LVL 1

Assisted Solution

by:sunmaster
sunmaster earned 100 total points
ID: 12189425
Hi,

  You can first assign the table a id. Say, "table".
then you can create a function to manipulate the layout of the table. Below are the methods that you may want to use.

var tblObj = document.getElementById('table'); //create an object for the table.

tblObj.insertRow(0); // insert a new row at index 0.
tblObj.insertRow(tblObj.rows.length); //insert a new row at the last row of the table.

tblObj.rows[0].cells.length; // this will return the number of columns for row 0
tblObj.rows.length; // this will return the number of rows for the table
tblObj.rows[0].insertCells(0); // insert a new cell at index 0 and at row 0


tblObj.deleteRow(2); // delete row with index 2
tblObj.rows[0].deleteCell(2); //delete cell 2 of row 0

say you want to access the item inside the row, you can use the methods below,

tblObj.rows[3].cells[2].innerText = "hello world"; // change the text for row 3 and column 2 to "hello world"

OR

tblObj.rows[3].cells[2].innerHTML = "<input type='text' value=' '  name='textbox21' >"  // this means you will create a text box in row 3 and column 2. You can pratically put any HTML code under innerHTML.

with this, you will be able to generate general function to cater your needs.
for e.g.

function editTbl(tblID){
  var tblObj = document.getElementById(tblID);

// store all the items in the table into a 2D array
.....

// delete all the row
.....

// repaint back the row
....

}

hope this helps. ^_^




0
 
LVL 63

Assisted Solution

by:Zvonko
Zvonko earned 100 total points
ID: 12190174
Here my example:

<html>
<head>
<style>
.seq {
  text-align: right;
}
</style>
<script language='javascript'>
function addRow(theBtn){
  theForm = theBtn.form;
  theRow = theBtn.parentNode;
  while(theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  rows = theRow.parentNode.rows;
  rowNum = rows.length-1;
  newRow = rows[1].cloneNode(true);
  theRow.parentNode.appendChild(newRow);
  fldName = ["textboxA", "textboxB", "textboxC"];
  for(var i=0;i<fldName.length;i++){
    fldGroup = theForm[fldName[i]];
    fldGroup[rowNum].value="";
  }
  for(var i=1;i<rows.length;i++){
    rows[i].childNodes[0].innerHTML=i;
  }
}
function delRow(theBtn){
  theRow = theBtn.parentNode;
  while(theRow.nodeName!="TR"){
    theRow = theRow.parentNode;
  }
  rows = theRow.parentNode.rows;

  if(rows.length>2){
    theRow.removeNode(true);
    for(var i=1;i<rows.length;i++){
      rows[i].childNodes[0].innerHTML=i;
    }
  }
}
</script>
</head>
<body>
<form>
<table>
<tr><th>SEQ</th><td>
<input type=button value="Add"onClick="addRow(this)">
</td><th>eno</th><th>ename</th><th>sal</th></tr>
<tr><th class="seq">1</th>
<td>
<input type=button value="Del "onClick="delRow(this)">
</td><td>
<input type=text name="textboxA" size="10">
</td><td>
<input type=text name="textboxB" size="40">
</td><td>
<input type=text name="textboxC" size="20">
</td></tr>
</table>
</form>
</body>
</html>

0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 20

Author Comment

by:chaitu chaitu
ID: 12190377
working well but cant i give unique names to textboxes
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 12190607

i have wriiten like this

but i have one  problem

when created 4 rows initially

if i deleted 3rd row and 2nd row  then  4th row serial number is becoming 2;its working right;

but textboxnames is going like this [4,1],[4,2],[4,3] actually these texbox names should become as [2,1],[2,2],[2,3] ;

what changes should i make to my code;; i will initialize pageNo as 1 in the jsp;

<html>
<head>
<title>Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/JavaScript">
j=1;
i=2;
function addRow(id,m,n){
                   var no_of_pieces            =      "<input type='text' name='mytextbox"+i+j+"_<%=pageNo%>'  size='4' >";
                         j++;
             var Method_Of_Pkg      =      "<input type='text' name='mytextbox"+i+j+"_<%=pageNo%>'  size='10' >";
                        j++;
             var Actual_Wt            =      "<input type='text' name='mytextbox"+i+j+"_<%=pageNo%>'  size='8' >";
                       j=1;
             var remove                  =            "<input type='button' value='<<' onClick='remove(this.parentNode.parentNode.rowIndex)'>";


            var tbody = document.getElementById(id).getElementsByTagName("TBODY" )[0];

                  var row = document.createElement("TR" )

                  var td0 = document.createElement("TD" )
                  td0.appendChild(document.createElement(remove))

                  var td1 = document.createElement("TD" )
                  td1.appendChild(document.createTextNode(i))


                  var td2 = document.createElement("TD" )
                  td2.appendChild (document.createElement(no_of_pieces))

                  var td3 = document.createElement("TD" )

                  td3.appendChild (document.createElement(Method_Of_Pkg))

                  var td4 = document.createElement("TD" )
                  td4.appendChild (document.createElement(Actual_Wt))


                  i=i+1;
                  row.appendChild(td0);
                  row.appendChild(td1);
                  row.appendChild(td2);
                  row.appendChild(td3);
                  row.appendChild(td4);

                  
               Rows = document.getElementById('myTable').rows
               lastRow = Rows[Rows.length-1]
               addButton = lastRow.lastChild
               row.appendChild(lastRow.removeChild(addButton));
           tbody.appendChild(row);
                   if(Rows.length  == 5)
                   {
                       document.getElementById("addtag").style.display ="none";
                       document.getElementById("Next").style.display ="";
                   }

        }

function remove(rowIndex){
  var table = document.getElementById('myTable');
   var rows = table.rows;

     if(rowIndex == rows.length-1) rows[rows.length-2].appendChild(rows[rows.length-1].removeChild(addButton))
     table.deleteRow(rowIndex);
     i--;
     if(rows.length > rowIndex)
        for (k = rowIndex; k < rows.length; k ++)
           rows[k].cells[1].innerHTML = k;

}



</script>
</head>

<body>
<form action="DynamicController?PageNo=<%=pageNo%>">
<table   id="myTable" cellspacing="0" border="2">
    <tr>
            <td>&nbsp;</td>
      <td><b>Sno</td>
        <td><b>No of Pieces</td>
        <td><b>Method Of Pkg</td>
         <td><b>Actual Wt</td>
        <td>&nbsp;</td>
    </tr>
      <tr>
      <%
      <td>&nbsp;</td>
      <td>1</td>
        <td>
        <input type=text  name="mytextbox11_<%=pageNo%>" value ="" >
        </td>
        <td>
        <input type=text  name="mytextbox12_<%=pageNo%>" value ="" >
        </td>
         <td>
         <input type=text name="mytextbox13_<%=pageNo%>" value ="" >
         </td>
         <td><input type='button' name='add1'   value='>>'   id="addtag" onClick="addRow('myTable');" style="display:''"></td>

    </tr>
</table>

<table cellspacing="0" border="2">

      <tr>
            <td colspan="11"><input type='submit' name='save'   value='Save' onClick="ex()";>
            &nbsp;<input type='submit' name='Next'   id="Next" value='Next' style="display:none">
            &nbsp;<input type='submit' name='Previous'   id="Previous" value='Previous' style="display:none">
            </td>
            </tr>
<input type=hidden name="rows" value = "3">
<input type=hidden name="cols" value = "3">
<input type=hidden  name="pageNumber" value="<%=pageNo%>">
            </tr>
</table>
0
 
LVL 3

Accepted Solution

by:
hemebond earned 300 total points
ID: 12197495
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
      <head>
            <title>Q_21150730</title>
            <!--[if IE]>
            <script type="text/javascript">
                  var ie = true;
            </script>
            <![endif]-->
      </head>
      <body>
            <table>
                  <thead>
                        <tr>
                              <th>sno</th>
                              <th>eno</th>
                              <th>ename</th>
                              <th>sal</th>
                              <th>option</th>
                        </tr>
                  </thead>
                  <tfoot></tfoot>
                  <tbody>
                  </tbody>
            </table>
            <input type="button" value="Add row" onclick="insert_row();">
      </body>
      <script type="text/javascript">
            var table = document.getElementsByTagName("table")[0];
            var tbody = table.getElementsByTagName("tbody")[0];

            for(var i = 0; i < 4; i++)
            {
                  insert_row();
            }

            function delete_row(e)
            {
                  var row;
                  if(window.ie)
                        row = this.parentNode.parentNode.rowIndex;
                  else
                        row = e.currentTarget.parentNode.parentNode.rowIndex;

                  if(row < tbody.rows.length)
                  {
                        var list1 = tbody.rows[row - 1].getElementsByTagName("input");
                        var list2 = tbody.rows[row].getElementsByTagName("input");
                        for(var i = 0;i < list1.length; i++)
                        {
                              list1[i].value = list2[i].value;
                        }
                        tbody.deleteRow(row);
                  }
                  else
                  {
                        tbody.deleteRow(row - 1);
                  }
                  update_row();
            }

            function insert_row()
            {
                  var row = tbody.insertRow(tbody.rows.length);
                  for(var i = 0; i < 5; i++)
                  {
                        var cell = row.insertCell(row.cells.length);
                        var txt;
                        if(cell.cellIndex == 0)
                        {
                              txt = document.createTextNode(row.rowIndex);
                              cell.appendChild(txt);
                        }
                        else if(cell.cellIndex == 4)
                        {
                              var a = document.createElement("a");
                              txt = document.createTextNode("delete");

                              if(window.ie)
                                    a.onclick = delete_row;
                              else
                                    a.addEventListener("click",delete_row,true);

                              a.appendChild(txt);
                              cell.appendChild(a);
                        }
                        else
                        {
                              var input = document.createElement("input");
                              input.setAttribute("id","txt_" + row.rowIndex + '_' + cell.cellIndex);
                              input.setAttribute("type","text");
                              input.setAttribute("value",input.getAttribute("id"));
                              cell.appendChild(input);
                        }
                  }
            }
            function update_row()
            {
                  for(var i = 0; i < tbody.rows.length; i++)
                  {
                        tbody.rows[i].cells[0].firstChild.nodeValue = i + 1;
                  }
            }
      </script>
</html>
0
 
LVL 20

Author Comment

by:chaitu chaitu
ID: 12198131
hi hemebond,

say if i delete 2nd row ,3rd row values should be changed to txt_21, txt_22,txt_23 thats not happening in ur code;
0
 
LVL 3

Expert Comment

by:hemebond
ID: 12221577
That's just the values in the textboxes, not the name of the control. I've just used the name in the value to add clarity to the example.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

In Part 1 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7849-Hex-Maze.html) we covered the hexagonal maze basics -- how the cells are represented in a JavaScript array and how the maze is displayed.  In this part, we'…
This article discusses the difference between strict equality operator and equality operator in JavaScript. The Need: Because JavaScript performs an implicit type conversion when performing comparisons, we have to take this into account when wri…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now