How to show more info of the table

Question

I have table with informations from database. There are ID, Name, Subject and Date. And I want to show more data like Message, OS, IP etc. when I click on one line (tr) of table. I found solution, but it is woking only on the first tr, not all.

Here is my code:

while($row = $result->fetch_assoc())
{
   $id=$row['ID'];
   $name=$row['Name'];
   $mail=$row['Email'];
   $subject=$row['Subject'];
   $message=$row['Message'];  
   $date=$row['Date'];
   $ip=$row['IP'];
   $device=$row['Device'];
   $os=$row['OS'];
   $browser=$row['Browser'];
   $finish=$row['Finish'];

   echo 
       '<tr class="trX" id="flip">
           <td class="tdX">' . $id . '</td>
           <td class="tdX">' . $name . '</td>
           <td class="tdX">' . $subject . '</td>
           <td class="tdX">' . $date . '</td>
           <div id="panel">
           ID:' . $id . '
           Name:' . $name . '
           Email:' . $mail . '
           Subject:' . $subject . '
           Message:' . $message . '
           Date:' . $date . '
           IP:' . $ip . '
           Mobile:' . $device . '
           OS:' . $os . '
           Browser:' . $browser . '
           Finish:' . $finish . '
         </div>
       </tr>';
    
 
}
echo ' </table>  ';

And JS Query

  $(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideToggle("slow");
  });
});

Thanks for tips

`#` means 'id' which really should be unique across your entire HTML document. See here https://stackoverflow.com/q/544010/296555. Your JS won't be able to tell which element you mean because all your rows have the same ID, `flip`. Common solutions are to look up the element when the _click_ happens or embed a separate click handler in each row. — waterloomatt, Mar 17 '21 at 01:34
I use class. But if I click on the every element, it shows me same information with same $id. So.... I use flip-i in the PHP, but I can’t use in JS. Or should I do with: this function? Thanks — MartanKing, Mar 18 '21 at 23:31

score 1 · Answer 1 · answered Mar 17 '21 at 01:36

1

It's only working on first tr because you can not reuse the ID flip for other elements. Few solutions I can think of:

Have a variable which increments and assign it to the id like flip-i, i here is the incrementing variable. Attach click event to this and then toggle the child elements.
Attach click event to a class and then toggle children of that clicked class.

answered Mar 17 '21 at 01:36

shutupchigo

703
1
7
19

I use class. But if I click on the every element, it shows me same information with same $id. So.... I use flip-i in the PHP, but I can’t use in JS. Or should I do with: this function? Thanks – MartanKing Mar 17 '21 at 22:51

score 0 · Answer 2 · edited Oct 13 '21 at 16:02

I changed your code this way:

<tr class="trX" id="flip_".$i onclick="flippanel($i)">
       <td class="tdX">' . $id . '</td>
       <td class="tdX">' . $name . '</td>
       <td class="tdX">' . $subject . '</td>
       <td class="tdX">' . $date . '</td>
       <div id="panel_".$i>
       ID:' . $id . '
       Name:' . $name . '
       Email:' . $mail . '
       Subject:' . $subject . '
       Message:' . $message . '
       Date:' . $date . '
       IP:' . $ip . '
       Mobile:' . $device . '
       OS:' . $os . '
       Browser:' . $browser . '
       Finish:' . $finish . '
     </div>
   </tr>

In jQuery you can call this like

function flippanel(i)

Then you can access panel by individual ID easily

How to show more info of the table

2 Answers2