jquery how to get value in a table - php

Question

I have the following code that generates a table:
<table class="table table-bordered table-striped" id="assignedvs">
<thead>
<tr>
<th>VlId</th>
<th>Name</th>
<th>Status</th>
<th>Voice</th>
<th>Jumbo</th>
<th>Mode</th>
</tr>
</thead>
<tbody>
<?php foreach ($vln as $vlndetail): ?>
<tr>
<td id='vlid'><?php echo $vlndetail['VlId'] ?></td>
<td><?php echo $vlndetail['Name'] ?></td>
<td><?php echo $vlndetail['Status'] ?></td>
<td><?php echo $vlndetail['Voice'] ?></td>
<td><?php echo $vlndetail['Jumbo'] ?></td>
<td><?php echo $vlandetail['Mode'] ?></td>
</tr>
<?php endforeach ?>
I need to find the row where the VlId matches what the user has specified in a text box. Once I've found this record, I want to grab value in the mode column for the particular row.
here's what i've written so far:
$('#delete').live('click', function() {
//get a count of all records. only allowed to delete if you have more than one + the header.
var reccount = $('#assignedvs tr').length;
if (reccount > 2)
{
//loop through the table
$('#assignedvs tr').each(function() {
var temp = $(this).find(".vlid").html();
console.log(temp);
if (temp == $('#uservalue').val){
//grab mode column
}
});
}
else
{
alert("error: must have at least 1 record.");
}
});
problem - the code i have to reference the vlid column is incorrect. it always prints a null to the console.
Can you tell me what I've done wrong?
thanks.
EDIT 1
I changed my id to a class and changed my jquery back to the original code I had. it's working - except for the fact that I think it's including the header . I have 4 rows + header. When i check the console results, the first print out is always NULL and then the correct value for the 4 records. how do it get it to ignore the header?

Answer 1

That's because you are finding by className, not by id. To find by id, use the following instead:
$(this).find("#vlid").html();
However, since ids should be unique across the entire document, a better solution would be to maintain your current code, and instead of using <td id='vlid'>, use <td class='vlid'>.
Also note that val() is a function. Thus, to get the value of a given input, you should use $('#uservalue').val().
EDIT: To exclude the header, use the $('#assignedvs tbody tr') selector. This way, you only get rows that are descendants of tbody, thus ignoring the header rows, which descend from thead.

Answer 2

couple of changes:
<?php echo $vlndetail['VlId']; //missing semi-colon ?>
var temp = $(this).find("#vlid").html(); vlid is an id

Answer 3

You can easily do this via datatables at http://datatables.net

Answer 4

var temp = $(this).find("#vlid").html(); // .vlid (by class) changed to #vlid (by id)

Answer 5

An even easier solution.
Assign an ID to each row with the vlId (possibly prepend tr_ to the ID to avoid duplication).
Assign a class with the column name to each datacell.
Like so:
<?php foreach ($vln as $vlndetail): ?>
<tr id='tr_<?php echo $vlndetail['VlId'] // set the ID ?>'>
<td class='vlid'><?php echo $vlndetail['VlId'] ?></td>
<td class='Name'><?php echo $vlndetail['Name'] ?></td>
<td class='Status'><?php echo $vlndetail['Status'] ?></td>
<td class='Voice'><?php echo $vlndetail['Voice'] ?></td>
<td class='Jumbo'><?php echo $vlndetail['Jumbo'] ?></td>
<td class='Mode'><?php echo $vlandetail['Mode'] ?></td>
</tr>
<?php endforeach ?>
Then to get the Name of the selected vlID just do this JQUERY:
var rowID = "#tr_" + $('#uservalue').val(); // this is optional. I prefer to cache values for increased code readability.
$(rowID + " td.Mode").dostuffhere(); // this selector returns the Mode cell for the row indicated by the user
This will grab the Mode column of that specific row.