How to get the row id of html table
Question
Assume I have some data from the database and store in a array, which like this:
$testArray = array(
array('0', 'name1', 'status1'),
array('1', 'name2', 'status2')
);
and I can print the content of the array as a html table, like this way:
Id name status
0 name1 status1
1 name2 status2
I want to use a 'status' dropdown list at the end of each row to change the status of each entry, and update into the database table. My questions are: How do I get the row id of each row(the 'Id' column) when I select a option of the drodown list? How to pass these info to the backend inorder to update the database table? I guess it should use some javascript. And below is the code:
<?php
$testArray = array(
array('0', 'name1', 'status1'),
array('1', 'name2', 'status2')
);
?>
<html>
<head>
</head>
<body>
<table>
<tr>
<td>Id</td>
<td>name</td>
<td>status</td>
</tr>
<?php
for ($i = 0; $i < count($testArray); $i++){
echo '<tr>';
for ($j = 0; $j < count($testArray[$i]); $j++){
echo '<td>';
echo $testArray[$i][$j];
echo '</td>';
}
echo '<td>';
echo '<select>';
echo "'<option value='0'>status1</option>";
echo "'<option value='1'>status2</option>";
echo '</select>';
echo '</td>';
echo '</tr>';
}
?>
</table>
</body>
</html>
Thanks for help!
3 answers
solution1
1 2011-09-01 18:32:27
You can:
- Store your row id in the hidden field in the first column and the get using jQuery
- Store as
idattribute and then using jQuery get the value (I think the best one) store the id in
idattribute in the yourselectcontrol and then get value on selected index change using jQueryin html you will have:
<select id="1">in javascript:
$('select').change(function () { var id = $(this).attr('id'); // post id to the server using ajax (you can use jQuery ajax request) });
solution2
1 ACCPTED 2011-09-01 18:41:32
You Could:
Give each of your select's an id that correspond to the row of data.
On change(jQuery), Get the value of the select, and use the jquery ajax call to send the rowID, and the 'StatusValue' to the handling page.
Show an status message on return of data.
http://api.jquery.com/jQuery.ajax/
--Building the Select
<?php
for ($i = 0; $i < count($testArray); $i++){
echo '<tr>';
for ($j = 0; $j < count($testArray[$i]); $j++){
echo '<td>';
echo $testArray[$i][$j];
echo '</td>';
}
echo '<td>';
**echo '<select id="' + $testArray[$i][0] + '">';**
echo "'<option value='0'>status1</option>";
echo "'<option value='1'>status2</option>";
echo '</select>';
echo '</td>';
echo '</tr>';
}
?>
--The jQuery (you will need the jquery file, download from jquery.com)
$(document).ready(function(){
$('select').change(function () {
var rowIdVal = $(this).attr('id'); // the id of the select (your rowID)
var statusVal = $(this).val(); // the value of the select
// post id to the server using ajax (you can use jQuery ajax request)
////I would check if the values are valid and not null...
$.ajax({
type: "POST",
url: "YOURHANDLERFILE.php",
data: {status: statusVal, rowId: rowIdVal},
success: function(d){
//show a status message
}
});
});
});
solution3
0 2011-09-01 18:34:14
I would do something like
$('#yourTableId').find('select').change(function() { //bind a change event to the selects
$(this).closest('tr') //this way you get the tr element of the row you changed the select value
.find('td:first') //or .find('td').first(). This will give you the td element for the Id column
.val(); //The actual value of the td Id element
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.