CODEWITHSUNDEEP
phpjqueryhtml
dot
dot

Reputation: 15660

jquery how to get value in a table

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?

Upvotes: 0

Views: 197

Answers (5)

David Grenier
David Grenier

Reputation: 1241

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.

Upvotes: 0

Jo&#227;o Silva
Jo&#227;o Silva

Reputation: 91309

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.

Upvotes: 2

Igor Parra
Igor Parra

Reputation: 10348

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

Upvotes: 0

Samar Rizvi
Samar Rizvi

Reputation: 433

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

Upvotes: 0

Teena Thomas
Teena Thomas

Reputation: 5239

couple of changes:

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

Upvotes: 0

Related Questions