ASP.NET

Html tables and textbox RSS

1 reply

Last post Feb 24, 2013 08:28 PM by deniztuzun

‹ Previous Thread|Next Thread ›

mary.asp

Member

64 Points

58 Posts

Html tables and textbox

Feb 24, 2013 06:19 PM|LINK

Hi, please help me to do the following: when I press to "Insert new row" button my code added a new row (with textboxes). When I press to "Insert new row" button and fill textboxes I need to get these fields' values.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Cash-flow</title>
    <script type="text/javascript">
        var element1;
        function displayResult() {
           
            var table = document.getElementById("myTable");
            var rowCount = table.rows.length;
            var cellCount = table.cells.length;
            // alert(cellCount);
            var row = table.insertRow(0);
            var cell = new Array();
            for (var i = 1; i < 13; i++) {

                cell[i] = row.insertCell(i - 1);

                element1 = document.createElement("input");
                element1.type = "text";
                element1.name = "txtbox[]";
                element1.id = i;
                cell[i].appendChild(element1);
               
       }

       function Result() {
           var i;
           while (i != null)
            {
               alert(document.getElementById(i).getAttribute('value'));
           }

       }

    </script>
  
    
</head>
<body>
<!-- Table's style-->

<style type="text/css" media="screen">
        body { background: #f6f8fa; margin: 0; padding: 0 }
        table, td, th {border-color: #B0C4DE; border-style: solid }
        table { border-width: 0 0 1px 0; border-spacing: 0; border-collapse: collapse; width: 500px; text-align: left }
        td, th { padding: 3px; border-width: 1px 0 0 0; font: 11px Segoe UI, Serif }
        th { background-color: #e9edf1; font-weight: bold; width: 80px }
        
   </style>
     
       


<table id="myTable" border="1">
   <tr>
     <td><input type="text" name="t1"  /></td>
     <td><input type="text" name="t2"  /></td>
     <td><input type="text" name="t3" /></td>
     <td><input type="text" name="t4"  /></td>
     <td><input type="text" name="t5"  /></td>
     <td><input type="text" name="t6"  /></td>
     <td><input type="text" name="t7"  /></td>
     <td><input type="text" name="t8"  /></td>
     <td><input type="text" name="t9"  /></td>
     <td><input type="text" name="t10"  /></td>
     <td><input type="text" name="t11" /></td>
     <td><input type="text" name="t12"  /></td>
   </tr>
   <tr>
    
   </tr>
 </table>
 <br />
 <hr />
 <!--Results-->
 <table>
 <tr>
     <td><input type="text" name="r1"  /></td>
     <td><input type="text" name="r2"  /></td>
     <td><input type="text" name="r3" /></td>
     <td><input type="text" name="r4"  /></td>
     <td><input type="text" name="r5"  /></td>
     <td><input type="text" name="r6"  /></td>
     <td><input type="text" name="r7"  /></td>
     <td><input type="text" name="r8"  /></td>
     <td><input type="text" name="r9"  /></td>
     <td><input type="text" name="r10"  /></td>
     <td><input type="text" name="r11" /></td>
     <td><input type="text" name="r12"  /></td>
   </tr>
 </table>
 <button type="button" onclick="displayResult()">Insert new row</button>
 <button type="button" onclick="Result()">Browse Result</button>
 
</body>
</html>

Thanks in advance.

deniztuzun

Member

48 Points

9 Posts

Re: Html tables and textbox

Feb 24, 2013 08:28 PM|LINK

i dont want to give id because id must be unique number for each text box. I think there is only one child object  within  the cell element then

i use children method of cell object.

     function displayResult() { 
            
            var table = document.getElementById("myTable"); 
            var rowCount = table.rows.length; 
            var cellCount = table.cells.length; 

            var row = table.insertRow(rowCount); 
           
            for (var i= 0; i< cellCount; i++) { 
 
                var cellObject = row.insertCell(i); 

                element = document.createElement("input"); 
                element.type = "text"; 
                element.name = "txtbox[]"; 
           
                cellObject.appendChild(element); 

                }
       } 
 
       function Result() { 
	     var table = document.getElementById("myTable"); 

		for (var row=0;row<table.rows.length;row++)
		{
			
          		for (var cell=0;cell<table.rows[row].cells.length;cell++)
 
            		{ 
				
		              	alert(table.rows[row].cells[cell].children[0].value); 
           		} 
		}
 
       }

Marked as answer by mary.asp on Feb 25, 2013 06:09 AM