Select HTML Row and get cells Values

rkrathor · April 16, 2014, 6:30am

Hi,
I working on a html table and want to get row wise information of that. please check the attachment.

this is my 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

droopsnoot · April 16, 2014, 11:10am

I can’t picture what you’re trying to achieve until the attachment is visible, but the only thing I imagine might be similar would use a tick-box to denote the row that you’re interested in, then your button click code (js, perhaps?) would read which row is selected and work on that.

I know it’s not the question asked, but I’d also recommend you take a look at CSS for styling rather than sticking it all in line with your html - it makes pages like this so much more complicated - you’ve got a div for the table so it would be relatively easy to style that without specifying it all on every line. Off topic I grant you, and you probably already know, but makes things so much clearer to read.

rkrathor · April 17, 2014, 5:42am

Hi,
Please check what i want to achieve.
Step-1

Step-2

thanks

droopsnoot · April 17, 2014, 11:11am

Sorry, I can’t help, but I don’t think it’s the PHP you want help with here, it’s the selecting a row so that your button code knows which row you want to use in the next step.

fretburner · April 17, 2014, 12:19pm

What I’d do is wrap the table and buttons in a form tag and add a checkbox for each row, with the value set to the row’s ID. The buttons would submit the form with the selected IDs and you can execute the relevant action in the target script.

Once the page is functional, you could then go on to enhance it with JavaScript if you wanted, hiding the checkboxes and allowing the user to select just by clicking the row, and even process the button actions via ajax for a nicer user experience.

Drummin · April 18, 2014, 9:42pm

You might give this a try. I didn’t change your query style.

<?php
if(isset($_POST['selected'])){
	$selected = $_POST['selected'];
}
$selected = (isset($selected) ? $selected : '');
if(isset($_POST['process'])){
	$process = $_POST['process'];
}
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();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
.main {
width: 100%;
float:left;
border:solid #CCCCCC;
background-color:#FFFFFF;
overflow:scroll;
height:400px;
}
.sub {
width: 100%;
float:left;
border:solid #CCCCCC;
background-color:#FFFFFF;
overflow:scroll;
height:120px;
}
.buttonset {
width: 100%;
float:left;
border:2px solid #E8E8E8;
background-color:#FFFFFF;
}
.buttonset input{
padding: 2px 10px;
margin:2px 5px;
border:1px solid #363636;
-moz-border-radius:6px 6px 6px 6px;
-webkit-border-radius:6px 6px 6px 6px;
border-radius:6px 6px 6px 6px;
background-color:#F3F3F3; /* for non-css3 browsers */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F3F3F3', endColorstr='#CDCDCD'); /* for IE */
background: -webkit-gradient(linear, left top, left bottom, from(#F3F3F3), to(#CDCDCD)); /* for webkit browsers */
background: -moz-linear-gradient(top, #F3F3F3, #CDCDCD); /* for firefox 3.6+ */;
}
.display {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
color:#000000;
border:solid #d6d4d5;
border-width:1px;
margin-top:0px;
}
.display .heading td {
font-size:11px;
background:#87bb2f;
font-weight:bold;
vertical-align:top;
text-align:center;
white-space: nowrap;
}
.display .normal td {
font-size:11px;
background:#FFFFFF;
vertical-align:top;
text-align:center;
}
.display .selected td {
font-size:11px;
background:#BCBBFF;
vertical-align:top;
text-align:center;
}
.display form {
padding:0;
margin:0;
}
.display input {
padding:0;
margin:0;
width:100%;
vertical-align:top;
text-align:center;
background: transparent;
border: none;
}
.title {
padding: 3px;
font-size: 21px;
}
</style>
</head>
<body>
<div id="main" class="main">

<table width="1800" align="center" border="1" cellspacing="0" cellpadding="0" class="display">
  <tr class="heading">
    <td>S.No.</td>
    <td>Booking Date</td>
    <td>Delivery Date</td>
    <td>Order Number</td>
    <td>Customer Name</td>
    <td>Status</td>
    <td>Product Range</td>
    <td>Cover</td>
    <td>Size</td>
    <td>Accessory</td>
    <td>Bag</td>
    <td>Packing</td>
    <td>Delivery</td>
    <td>Paper</td>
    <td>Coating</td>
    <td>Priority</td>
    <td>Advance</td>
    <td>G Total</td>
    <td>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;

$celltype = (isset($selected) && is_numeric($selected) && $selected == $i ? "selected" : "normal");
?>
	<tr class="<?php echo $celltype; ?>">
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $id; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f2; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f3; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f4; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f20; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f7; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f8; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f9; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f10; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f11; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f12; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f13; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f14; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f21; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f15; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f16; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f17; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f18; ?>" onclick="this.form.submit()" /></form></td>
		<td><form action="" method="post"><input type="hidden" name="selected" value="<?php echo $i; ?>" /><input type="text" name="item" value="<?php echo $f19; ?>" onclick="this.form.submit()" /></form></td>
	</tr>
  <?php
$i++;

}
?>

</table>
</div>

<form action="" method="post">
	<table width="1800" align="center" border="0" cellspacing="0" cellpadding="0" class="buttonset">
		<tr>
			<td>
				<input type="hidden" name="selected" value="<?php echo $selected; ?>" />
				<input type="submit" name="process" value="Create Estimate" />
				<input type="submit" name="process" value="Job Ticket" />
				<input type="submit" name="process" value="Invoice" />
				<input type="submit" name="process" value="Confirm Payment" />
				<input type="submit" name="process" value="Cancel Order" />
				<input type="submit" name="process" value="Process" />
			</td>
		</tr>
	</table>
</form>
<?php
if(isset($selected) && is_numeric($selected) && isset($process)){
?>
<div class="sub">
<div class="title"><?php echo $process; ?></div>
<form action="" method="post">
<table width="1800" align="center" border="1" cellspacing="0" cellpadding="0" class="display">
  <tr class="heading">
    <td>S.No.</td>
    <td>Booking Date</td>
    <td>Delivery Date</td>
    <td>Order Number</td>
    <td>Customer Name</td>
    <td>Status</td>
    <td>Product Range</td>
    <td>Cover</td>
    <td>Size</td>
    <td>Accessory</td>
    <td>Bag</td>
    <td>Packing</td>
    <td>Delivery</td>
    <td>Paper</td>
    <td>Coating</td>
    <td>Priority</td>
    <td>Advance</td>
    <td>G Total</td>
    <td>Balance</td>
  </tr>

  <?php

$f1=mysql_result($query_for_result,$selected,"production_id");
$f2=mysql_result($query_for_result,$selected,"booking_date");
$f3=mysql_result($query_for_result,$selected,"delivery_date");
$f4=mysql_result($query_for_result,$selected,"order_no");
$f5=mysql_result($query_for_result,$selected,"salutation");
$f6=mysql_result($query_for_result,$selected,"customer_name");
$f7=mysql_result($query_for_result,$selected,"status");
$f8=mysql_result($query_for_result,$selected,"product_range");
$f9=mysql_result($query_for_result,$selected,"cover");
$f10=mysql_result($query_for_result,$selected,"size");
$f11=mysql_result($query_for_result,$selected,"accessory");
$f12=mysql_result($query_for_result,$selected,"bag");
$f13=mysql_result($query_for_result,$selected,"packing");
$f14=mysql_result($query_for_result,$selected,"delivery");
$f15=mysql_result($query_for_result,$selected,"coating");
$f16=mysql_result($query_for_result,$selected,"priority");
$f17=mysql_result($query_for_result,$selected,"advance");
$f18=mysql_result($query_for_result,$selected,"gtotal");
$f19=mysql_result($query_for_result,$selected,"balance");
$f20=$f5.$f6;
$f21=mysql_result($query_for_result,$selected,"paper");
$id = $selected+1;
?>
	<tr class="normal">
		<td>
			<input type="hidden" name="process" value="<?php echo $process; ?>" />
			<input type="hidden" name="selected" value="<?php echo $selected; ?>" />
			<input type="hidden" name="production_id" value="<?php echo $f1; ?>" />
			<input type="text" name="row_id" value="<?php echo $id; ?>" />
		</td>
		<td><input type="text" name="booking_date" value="<?php echo $f2; ?>" /></td>
		<td><input type="text" name="delivery_date" value="<?php echo $f3; ?>" /></td>
		<td><input type="text" name="order_no" value="<?php echo $f4; ?>" /></td>
		<td><input type="text" name="greating" value="<?php echo $f20; ?>" /></td>
		<td><input type="text" name="status" value="<?php echo $f7; ?>" /></td>
		<td><input type="text" name="product_range" value="<?php echo $f8; ?>" /></td>
		<td><input type="text" name="cover" value="<?php echo $f9; ?>" /></td>
		<td><input type="text" name="size" value="<?php echo $f10; ?>" /></td>
		<td><input type="text" name="accessory" value="<?php echo $f11; ?>" /></td>
		<td><input type="text" name="bag" value="<?php echo $f12; ?>" /></td>
		<td><input type="text" name="packing" value="<?php echo $f13; ?>" /></td>
		<td><input type="text" name="delivery" value="<?php echo $f14; ?>" /></td>
		<td><input type="text" name="paper" value="<?php echo $f21; ?>" /></td>
		<td><input type="text" name="coating" value="<?php echo $f15; ?>" /></td>
		<td><input type="text" name="priority" value="<?php echo $f16; ?>" /></td>
		<td><input type="text" name="advance" value="<?php echo $f17; ?>" /></td>
		<td><input type="text" name="gtotal" value="<?php echo $f18; ?>" /></td>
		<td><input type="text" name="balance" value="<?php echo $f19; ?>" /></td>
	</tr>
</table>
<table width="1800" align="center" border="0" cellspacing="0" cellpadding="0" class="buttonset">
	<tr>
		<td><input type="submit" name="submit" value="<?php echo $process; ?>" /></td>
	</tr>
</table>
</form>
</div>
<?php
}
?>
<?php
//echo "<pre style=\\"float:left;\\">";
//print_r($_POST);
//echo "</pre>";
?>
</body>
</html>

Drummin · April 18, 2014, 10:43pm

Here’s a test screenshot.

rkrathor · April 19, 2014, 6:06am

hi Drummin ,
thank you man, this is simply awesome that you create.
you give me one step ahead what i was looking for.
i will use this and let you know if any problem come.

thanks again

fretburner · April 19, 2014, 2:18pm

Just a couple points about the code here:

As we often point out here on the forums, the mysql_ functions have been deprecated (which means they are due to be removed from PHP) and so it’s recommended that you switch to using either the mysqli or PDO extension.

Also, rather than those repetative statements getting the various DB columns and assigning them to temporary variables, you could just get a whole row as an associative array and build your table row like this:


<?php while ($row = mysqli_fetch_assoc($result)): ?>
    <tr>
        <td class="rowSelect"><input type="checkbox" name="selectedRows[]" value="<?php echo $row['production_id'] ?>" /></td>
        <td><?php echo $row["production_id"]; ?></td>
        <td><?php echo $row["booking_date"]; ?></td>
        <td><?php echo $row["delivery_date"]; ?></td>
        <td><?php echo $row["order_no"]; ?></td>
        <td><?php echo $row["salutation"].$row["customer_name"]; ?></td>
        <td><?php echo $row["status"]; ?></td>
        <td><?php echo $row["product_range"]; ?></td>
        <td><?php echo $row["cover"]; ?></td>
        <td><?php echo $row["size"]; ?></td>
        <td><?php echo $row["accessory"]; ?></td>
        <td><?php echo $row["bag"]; ?></td>
        <td><?php echo $row["packing"]; ?></td>
        <td><?php echo $row["delivery"]; ?></td>
        <td><?php echo $row["paper"]; ?></td>
        <td><?php echo $row["coating"]; ?></td>
        <td><?php echo $row["priority"]; ?></td>
        <td><?php echo $row["advance"]; ?></td>
        <td><?php echo $row["gtotal"]; ?></td>
        <td><?php echo $row["balance"]; ?></td>
    </tr>
<?php endwhile; ?>

What I had in mind was not to wrap each row in a form, but rather to add a checkbox for each row (as shown above) with a single form tag wrapping all the table rows, and the submit buttons below. This would allow the page to still work without JS. For those with JS, we could provide an enhanced experience by adding some code to hide the checkboxes and select them simply by clicking on a row. The form submit can then be intercepted and we can pull out all the ids and submit via ajax or whatever:

$('.rowSelect').hide();

$("tbody tr").on('click', function() {
    $(this).toggleClass('selected');

    var checkBox = $(this).find("input[name=selectedRows\\\\[\\\\]]");
    checkBox.prop("checked", !checkBox.prop("checked"));
});

$('form').submit(function(e){
    e.preventDefault();

    var ids = $('input:checked').map(function(element) {
        return $(this).val();
    });

    console.log(ids.toArray());
});

system · October 8, 2014, 5:55am