Solved

adding and removing table rows

Posted on 2004-09-30
9
522 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
Why You Should Analyze Threat Actor TTPs

After years of analyzing threat actor behavior, it’s become clear that at any given time there are specific tactics, techniques, and procedures (TTPs) that are particularly prevalent. By analyzing and understanding these TTPs, you can dramatically enhance your security program.

 
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

How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

Join & Write a Comment

Suggested Solutions

When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
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…

762 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

19 Experts available now in Live!

Get 1:1 Help Now