dynamic table using javascript

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • tokcy
    New Member
    • Sep 2008
    • 45
    #1

    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...
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      Please post your code, so we can see where the problem might lie.

        Comment

        • tokcy
          New Member
          • Sep 2008
          • 45
          #3
          Code:
          <!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>

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              You're passing 'this' to setvalue when you probably mean to pass a string.

                Comment

                Previous template Next
                Working...