CODEWITHSUNDEEP
phpjavascriptjquery
Nathan
Nathan

Reputation: 12010

Can each row in an HTML table be numbered?

What I would like to do is number each row in my table. I can't manually number the table myself, as all of the info in it is retrieved from a database. Is this possible with jQuery or PHP? Here's a screen shot of the table:

Screenshot

I tried searching for this, and did not find anything that helped me.

Here is the PHP / HTML that is displaying the table:

 <tr>
 <th>Name</th>
 <th>Email</th>
 <th>Subject</th>
 <th>Created on</th>
 <th style="width:65px;">Status</th>
 <th>Actions</th>
 </tr>

<?php

[...]

//Display the results
while($info = mysql_fetch_assoc($result)){
//data
$name = $info['name'];
$email = $info['email'];
$subject = $info['subject'];
$ticketid = $info['ticket'];
$isActive = $info['is_active'];
$created = $info['created'];
    //status
    if($isActive == "1") {
    $status = "<span class=\"open\">Open</span>"; 
    $status2 = "active";
    }
    else if($isActive == "0") { 
    $status = "<span class=\"closed\">Closed</span>"; 
    $status2 = "closed";
    }
    else {
    $status = "";
    }
    echo  "
<tr>
<td style=\"min-width: 87px;\">$name</td>
<td style=\"min-width:248px;\" title=\"$email\">".addEllipsis($email, 33)."</td>
<td title=\"$subject\">".addEllipsis($subject, 18)."</td>
<td style=\"width: 235px;\">$created</td>
<td title=\"This ticket is $status2\">$status</td>
<td><a href='/employee/employee.php?ticket=$ticketid'>View Ticket &raquo;</a></td>
</tr>
    ";
}

As you can see, it's displayed with a while loop.

If anyone knows a way to number each line in my table with jQuery or PHP, please help me :)

Upvotes: 1

Views: 2326

Answers (5)

Paul Reed
Paul Reed

Reputation: 113

Set an auto increment property in the SQL table, which can be used as an index, and will increase automatically when a new entry is added?

Upvotes: 1

Atul Gupta
Atul Gupta

Reputation: 755

PHP

<tr>
  <th>Sr. No</th> // Add header for counter
  <th>Name</th>
  ...
</tr>

...
$i=1; // add counter -----------corrected-------------
while($info = mysql_fetch_assoc($result)){
  //data
  ...
  echo  "
    <tr>
      <td>$i</td> // include counter to table
      <td style=\"min-width: 87px;\">$name</td>
      ...
    </tr>
  ";
  $i++; // increment counter
}

Upvotes: 1

Janis Lankovskis
Janis Lankovskis

Reputation: 1040

I would go with PHP solution listed by Atul Gupta.

To add more - you also can to start iteration based on which page you are. 

<?php

$i = ($page-1) * $itemsPerPage;
while(....)
{
    echo $i;
    $i++;
}
?>

if you are on the second page of your list would get something like 11,12,13,14,....

Upvotes: 1

Baz1nga
Baz1nga

Reputation: 15579

$trCounter=0;

while($info = mysql_fetch_assoc($result)){
//data
$name = $info['name'];
$email = $info['email'];
$subject = $info['subject'];
$ticketid = $info['ticket'];
$isActive = $info['is_active'];
$created = $info['created'];
    //status
    if($isActive == "1") {
    $status = "<span class=\"open\">Open</span>"; 
    $status2 = "active";
    }
    else if($isActive == "0") { 
    $status = "<span class=\"closed\">Closed</span>"; 
    $status2 = "closed";
    }
    else {
    $status = "";
    }
    echo  "
<tr>
<td>$trCounter++</td>
<td style=\"min-width: 87px;\">$name</td>
<td style=\"min-width:248px;\" title=\"$email\">".addEllipsis($email, 33)."</td>
<td title=\"$subject\">".addEllipsis($subject, 18)."</td>
<td style=\"width: 235px;\">$created</td>
<td title=\"This ticket is $status2\">$status</td>
<td><a href='/employee/employee.php?ticket=$ticketid'>View Ticket &raquo;</a></td>
</tr>
    ";
}

or you could always use the :eq api in your jquery selector or its equivalent to work with the index but like I asked it depends on what you want to do with the index.

Upvotes: 2

Guard
Guard

Reputation: 6955

jQuery:

$(function () {
    var i = 0;
    $('table thead tr').prepend('<th>#</th>');
    $('table tbody tr').each(function () {
        i += 1;
        $(this).prepend('<td>' + i + '</td>');
    });
});

Upvotes: 1

Related Questions