How can I use bootstrap to show details on each row of table?

Question

My table code. it's included the popover button, that I want to show other detail than Name and Country.

  while ($data = mysql_fetch_array($result)) 
           {
           echo "<tr>";
           $Name = $data['Name'];
           $Address = $data['Address']; 
           $Tel = $data['Tel'];
           $Email = $data['Email'];
           $Country = $data['Country'];
           $ManufacturerKey = $data['ManufacturerKey'];
           echo "<td>{$Name}</td><td>{$Country}</td>";
           echo '<td><a href="#" id="detail" class="btn btn-danger" rel="popover" data-content="Test" data-original-title="detail">detail</a></td>';
           echo "</tr>"; 
           }
           echo "</table></center>";
           }

and Javascript:

<script>  
    $(function ()  
    { $("#detail").popover({placement:'left'});  
    });  
</script>

my problem is it's confuse about the id.In the each table row it has same id like "detail".How can I fix that ?? Thanks for all answer.Tell me if you want more code thanks so much.

[**Please, don't use `mysql_*` functions in new code**](http://bit.ly/phpmsql). They are no longer maintained [and are officially deprecated](https://wiki.php.net/rfc/mysql_deprecation). See the [**red box**](http://j.mp/Te9zIL)? Learn about [*prepared statements*](http://j.mp/T9hLWi) instead, and use [PDO](http://php.net/pdo) or [MySQLi](http://php.net/mysqli) - [this article](http://j.mp/QEx8IB) will help you decide which. If you choose PDO, [here is a good tutorial](http://stackoverflow.com/a/14110189/1723893). — NullPoiиteя, Jan 05 '13 at 10:39
What has Twitter Bootstrap to do with that? And yes, use PDO instead, it's easier to write code for, especially if you're new to PHP. Will save you some time then. — hakre, Jan 05 '13 at 11:05
@soft genic I want to specify id in each row of table because i want to show other detail in each row of the table. — DrNutsu, Jan 05 '13 at 11:12
Well the actual question has nothing to do with bootstrap in specific. Generate an ID per each row, for example `sprintf('row-%d', $data['Id']);` if the table has an Id column, otherwise use a counter. This is really trivial material I'd say. Question should be: What have you tried? Seeing that the ID is duplicated sounds like a good start to find the solution, isn't it? — hakre, Jan 05 '13 at 11:14
Well by assigning different ids your popover will not gonna work cause you have to make the javasript function for all ids to popover. But i work with popover too you dont need to change id just populate al the elements with id="detail" and you'll see each popover contains its respective detail. Kindly let me know if your issue being resolved withthis — soft genic, Jan 05 '13 at 11:25

Pierrickouw · Accepted Answer · 2013-01-05T11:55:37.397

0

Every tag must have an unique id, this html isn't correct.

You have to use a class selector.

     //add detail in your class
echo '<td><a href="#" id="detail" class="btn btn-danger detail" rel="popover" data-content="Test" data-original-title="detail">detail</a></td>';

Edit : Don't forget to change the id. For example, you can do id="detail'.$data['id'].'" if you have an id.

In your JS (jQuery as he uses bootstrap):

//use class selector instead of id selector
$(function ()  {
        $(".detail").popover({placement:'left'});  
    });

edited Jan 05 '13 at 11:55

answered Jan 05 '13 at 10:39

Pierrickouw

4,644
1
30
29

You still have duplicated id for detail in your code... – OptimusCrime Jan 05 '13 at 10:43
Because I don't know what he really want to put here. Will edit with a tip – Pierrickouw Jan 05 '13 at 11:44
@GreenLeaf no way your solution will not gonna work JS function is wrong !! – soft genic Jan 05 '13 at 11:49
He uses jQuery, check syntax : http://www.w3schools.com/jquery/jquery_syntax.asp – Pierrickouw Jan 05 '13 at 11:53
well w3schools.com is known as w3fools.com on stackoverflow. Still jquery function is wrong in your answer for his solution – soft genic Jan 05 '13 at 11:58
Why ? Here the link from jQuery website : http://api.jquery.com/ready/ – Pierrickouw Jan 05 '13 at 12:01
` jquery function is wrong in your answer for his solution` , Well by assigning different ids your popover will not gonna work cause you have to make the javasript function for all ids to popover. – soft genic Jan 05 '13 at 12:02
That's why I used class selector instead of id selector, and put a tip to change the id – Pierrickouw Jan 05 '13 at 12:03
1

ok in that case the trick should work – soft genic Jan 05 '13 at 12:07

How can I use bootstrap to show details on each row of table?

1 Answers1