dynamic table using javascript

hi everyone,

i am creating dynamic row in a table using javascript its working fine and now i want to create more than 1 table using javascript which is dynamic its also working fine but when i am taking the value of each table individually thats i am not able to get any value. if i get the value of table then its not taking properly.

let me explain the whole scenario...

i want to add product specification . it may vary in number of specification.i.e. i may be 2 or 10 or 30 etc.for each specification i have to add properties it is possible only using dynamic rows.like suppose if i have 5 specification and i have to add properties for each specification then i will use dynamic row creation. And now i am able to do this till now after that i am not able to take the value of all the text fields in a single text field by comma(,) separated.

how will i do this please help me out its urgent...

Apr 8 '09 #1

Follow Post Reply

4738

acoder

16,027

Expert Mod 8TB

Please post your code, so we can see where the problem might lie.

Apr 8 '09 #2

tokcy

Expand|Select|Wrap|Line Numbers

 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

     <head>

          <title>Dymanic Row</title>

<script language="Javascript" type="text/javascript">

     function addRow(str)

     {

          var tbl = document.getElementById('mySampleTable'+str);

          var lastRow = tbl.rows.length;

          var iteration = lastRow;

          var row = tbl.insertRow(lastRow);

          var cellLeft = row.insertCell(0);

          var textNode = document.createTextNode(iteration);

          //cellLeft.appendChild(textNode);

          var cellRight = row.insertCell(1);

          var el = document.createElement('input');

          el.type = 'text';

          el.name = 'txtRow' + iteration;

          el.id = 'txtRow' + iteration;

          el.size = 40;

          cellRight.appendChild(el);

          //el.setAttribute("onBlur","setvalue(this);");

     }
 
     function removeRow(str1)

     {

          var tbl = document.getElementById('mySampleTable'+str1);

          var lastRow = tbl.rows.length;

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

     }
 
function setvalue(str2)

{

    alert(str2);

    var i=0;

    var idstr="txtRow" + str2;

    //alert('item' + str2);

    document.getElementById('item' + str2).value="";

    while(document.getElementById(idstr))

    {

    document.getElementById('item' + str2).value=document.getElementById('item' + str2).value + ',' + document.getElementById(idstr).value;

    idstr='txtRow' + str2;

    str2++;

    }

}

</script>

     </head>

     <body leftmargin="0" topmargin="0">

          <form action="#" name="frm" method="post">

              <? 

              $i=1;

              for($i=1;$i<=5;$i++)

                {

              ?>

               <table align="center" width = "75%">

                     <tr>

                       <td align = "center">

                 <input type="text" name="item<?=$i?>" id="item<?=$i?>" value="<?=$i?>" size="40" />

                 <table border="1" id="mySampleTable<?=$i?>">

                                     <tr>

                                        <td>&nbsp;</td>

                                        <td>

                                             Specification

                                        </td>

                                        <td>&nbsp;</td>

                                   </tr>
 
                                   <tr>

                                        <td>&nbsp;</td>

                                        <td>

                                             <input type="text" name="txtRow<?=$i?>" id="txtRow<?=$i?>" size="40" value="<?=$i?>" onBlur="setvalue(this);" /></td>

                                        <td>&nbsp;</td>

                                   </tr>

                              </table>

                              <input type="button" name="add" id="add" value="Add" onClick="addRow('<?=$i?>'); setvalue(<?=$i?>);" />

                              <input type="button" value="Remove" onClick="removeRow('<?=$i?>');" />

                              <input type="submit" value="Submit" onClick="setvalue(<?=$i?>);" />

                         </td>

                    </tr>

               </table>

               <?

               }

               ?>

          </form>

     </body>

</html>

Apr 8 '09 #3

acoder

16,027

Expert Mod 8TB

You're passing 'this' to setvalue when you probably mean to pass a string.

Apr 8 '09 #4

dynamic table using javascript

Post your reply

Similar topics