www.webdeveloper.com
Results 1 to 3 of 3

Thread: Select HTML Row and get cells Values.

Hybrid View

  1. #1
    Join Date
    Jul 2012
    Posts
    23

    Question Select HTML Row and get cells Values.

    Hi,
    I working on a html table and want to get row wise information of that. please check the attachment.
    Click image for larger version.
    click.jpg
    this is my code
    Code:
    <?php
    //if(isset($_POST['submit']))
    // { 
     include ("db.php");
     $query_for_result=mysql_query("SELECT * FROM pro_production ORDER BY production_id");
    $num=mysql_numrows($query_for_result);
    //echo <<<end
    //<table align="right" >
    //<tr>
    //<td bgcolor="#6f0d00" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3px 5px 3px 5px; color:#FFFFFF;" >Total Result Search</td><td>&nbsp;</td><td bgcolor="#000000"  style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; padding:3px 5px 3px 5px; color:#FFFFFF;">$num</td>
    //</tr>
    //</table>
    //end;
    mysql_close();
    ?>
    <div id="main" style="width: 100%; float:left; border:solid #CCCCCC; background-color:#FFFFFF; overflow:scroll; height:500px;">
    <table width="1800" align="center" border="1" cellspacing="0" cellpadding="0" style="font-family:Verdana, Arial, Helvetica, sans-serif; font-size:12px; color:#000000; border:solid #d6d4d5; border-width:1px; margin-top:0px;">
      <tr>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >S.No.</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Booking Date</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Delivery Date</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Order Number</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Customer Name</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Status</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Product Range</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Cover</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Size</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Accessory</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Bag</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Packing</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Delivery</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Paper</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Coating</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Priority</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Advance</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >G Total</td>
        <td valign="top" style="font-size:11px; background:#87bb2f; font-weight:bold;" align="center" >Balance</td>
      </tr>
      <?php
    $i=0;
    while ($i < $num)
     {
    $f1=mysql_result($query_for_result,$i,"production_id");
    $f2=mysql_result($query_for_result,$i,"booking_date");
    $f3=mysql_result($query_for_result,$i,"delivery_date");
    $f4=mysql_result($query_for_result,$i,"order_no");
    $f5=mysql_result($query_for_result,$i,"salutation");
    $f6=mysql_result($query_for_result,$i,"customer_name");
    $f7=mysql_result($query_for_result,$i,"status");
    $f8=mysql_result($query_for_result,$i,"product_range");
    $f9=mysql_result($query_for_result,$i,"cover");
    $f10=mysql_result($query_for_result,$i,"size");
    $f11=mysql_result($query_for_result,$i,"accessory");
    $f12=mysql_result($query_for_result,$i,"bag");
    $f13=mysql_result($query_for_result,$i,"packing");
    $f14=mysql_result($query_for_result,$i,"delivery");
    $f15=mysql_result($query_for_result,$i,"coating");
    $f16=mysql_result($query_for_result,$i,"priority");
    $f17=mysql_result($query_for_result,$i,"advance");
    $f18=mysql_result($query_for_result,$i,"gtotal");
    $f19=mysql_result($query_for_result,$i,"balance");
    $f20=$f5.$f6;
    $f21=mysql_result($query_for_result,$i,"paper");
    
    $id=$i+1;
    ?>
       <!--<tr onclick="myFunction(this)">-->
       <tr >		
       <!--<td valign="top" style="font-size:11px; " align="center" ><?php echo htmlentities($f1); ?></td>-->
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $id; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f2; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f3; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f4; ?></td>
      <!--<td valign="top" style="font-size:11px; " align="center" ><?php echo $f5; ?></td>-->
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f20; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f7; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f8; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f9; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f10; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f11; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f12; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f13; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f14; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f21; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f15; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f16; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f17; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f18; ?></td>
        <td valign="top" style="font-size:11px; " align="center" ><?php echo $f19; ?></td>
    
      </tr>
      <?php
    $i++;
    
    }
    
    ?>
    
    </table>
    </div>
    What i want that if i select row first and the click on any of the bottom buttons then i could get the whole information of that row.
    I have done lot of search but i only able to get the data when click on the row itself but not when i clicked on the bottom button,

    So if any one can help me in this regard then i will be very thankful.

    thanks

  2. #2
    Join Date
    Jul 2012
    Posts
    23
    hi,
    this is what i want to do.

    Step-1
    step-1.jpg

    Step-2
    step-2.jpg
    Thanks

  3. #3
    Join Date
    Feb 2014
    Location
    Canada
    Posts
    155
    Add an onClick attribute to each of your <tr>. Once the user clicks, it will write the values of the corresponding cells to the appropriate hidden field. Once the user clicks a button, using PHP, you can easily retrieve the values and process however you need to. You will need to change the way it's writing to the hidden fields as I'm not going to do all the work for you but this will get you started. You can also change the desired colours that the rows will change to once clicked.

    HTML Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<script type = "text/javascript">
    			function readValues(x) {
    				var content = x.children.length;
    				for(var i = 0; i < content; i++) {
    					document.getElementById("hid"+i).value = "";
    					var j = x.cells[i].innerHTML;
    					document.getElementById("hid"+i).value = j;
    				}
    				changeColour(x);
    			}
    			
    			function changeColour(x) {
    				var t = document.getElementById("myTable").getElementsByTagName("tbody")[0];
    				for(var i = 0; i < (t.children.length); i++) {
    					t.rows[i].style.backgroundColor = "#C8D1C8";
    					x.style.backgroundColor = "#E4FEDD";
    				}
    			}
    		</script>
    	</head>
    	<body>
    		<table id = "myTable" cellpadding = "3" cellspacing = "3">
    			<thead>
    				<tr>
    					<th>Col 1</th>
    					<th>Col 2</th>
    				</tr>
    			</thead>
    			<tbody>
    				<tr onClick = "readValues(this)" >
    					<td>Row 1, Col 1</td>
    					<td>Row 1, Col 2</td>
    				</tr>
    				<tr onClick = "readValues(this)" >
    					<td>Row 2, Col 1</td>
    					<td>Row 2, Col 2</td>
    				</tr>
    			</tbody>
    		</table>
    		<form action = "something.php" method = "get/post">
    			<input type = "hidden" name = "values1" value = "" id = "hid0" />
    			<input type = "hidden" name = "values2" value = "" id = "hid1" />
    			<input type = "submit" value = "submit" />
    		</form>
    	</body>
    </html>
    Last edited by Error404; 04-17-2014 at 07:29 AM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles