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.