0

I have a page that automatically runs a query and displays the results on the page. What i would like to do is that when click on one result, it should show me more details on that specific item on the same page (perhaps in a div), but i don't want to code a div/page for each specific item because i get results from a database that is ever growing.

this is how my php that displays the result looks:

 while($row = mysql_fetch_array($result)){
 if (strlen($row['companyname'])>0) {


  echo      "<ul data-role='listview' data-inset='true'>
  <li><a href='#'>
  <h3>{$row['companyname']}</h3>
            <p><b>Address:</b></p>
            <p><b>Tel:</b>{$row['tel']}   <b>Fax:</b>{$row['fax']}</p>
            <p><b>Email:</b>{$row['email']}</p>
            <p><b>Website:</b>{$row['website']}</p>
            <p class='ui-li-aside'><strong>VIEW MORE</strong></p>
        </a></li>
    </ul>";

I tried putting this code below in the href attribute, but it still doesn't work, and it will leave the page which i don't want to happen:

  <a href="resultdetails.php?companyname='{$row['companyname']}"

Then i get the result on the next page like this:

 $companyname = intval($_GET['companyname']);
 $query = mysql_query("SELECT * FROM businessuser WHERE companyname=$companyname");
 $details = mysql_fetch_array($query); 

 echo ($details[companyname]);
 echo ($details[website]);
 echo ($details[tel]);

This only ever give the first result in my table, no matter which result i click :(

Please help...thanks

4

2 に答える 2

1

それでは、これを実現するにはJavascriptとJqueryが必要になります。これがデモです：http ：//jsfiddle.net/yZrUg/4/ 私はあなたのために準備しました。

そこからコードをコピーするか、HTMLを次に示します。

<table id="report"><tbody>  



    <tr class="odd">
            <td class="left"> Company Name </td> 
        </tr>

        <tr class="even" style="display: none;">
            <td style=" border:1px solid #CCC;">
                <p style="color:#656565;"> address</p>
                 <p style="color:#656565;"> tel </p>
                 <p style="color:#656565;"> email </p>
                 <p style="color:#656565;"> website </p>

            </td>
        </tr>  




    </tbody></table>

CSS：

#report { border-collapse:collapse; }
        #report h4 { margin:0px; padding:0px;}
        #report td {  color:#000; padding:0px; }
        #report tr.odd td { color:black;  cursor:pointer; border-bottom:1px solid #CCC;   }


        #report tr.even td {background-color:#dadada;  padding:10px 0px 15px 20px; }
        #report tr.odd td.left {width: 1000px;   }
        #report tr.odd td.left b{font-size:18px; font-weight:normal;}
        #report div.arrow { background:transparent url(../images/arrows.png) no-repeat scroll 0px -16px; width:16px; height:16px;  }
        #report div.up { background-position:0px 0px; }
​

そしてJavascript：

$(document).ready(
    function(){
        $('#report tbody tr:nth-child(odd)').addClass('odd');
        $('#report tbody tr:nth-child(even)').addClass('even').hide();
        $('tr.odd').click(
            function(){
                var that = $(this),
                    next = that.next('.even');
                that.find('.arrow').toggleClass('up');
                next.toggle().siblings('.even').hide();
                $('.even:not(":visible")').each(
                    function(){
                        $(this).prev('.odd').find('.up').removeClass('up');
                    });
            });
        });
​

Jqueryを使用することを忘れないでください

于 2012-12-23T14:37:22.027 に答える
1

PHP is server side. That means when the page is served to the user you can't edit it with PHP. If you want to show details on the same page, you have two options:

a) Put details in hidden div and show it by click View more link

<a href="#" onclick="$('#details1').css('display', 'block');return false;">View more</a>
<div style="display: none;" id="details1">Details here</div>

b) Load details with JavaScript (which is server side, meaning it runs in the browser after the page was loaded). You need to use AJAX to load the data. To do that you need to put the code of getting the details in another script, say get_details.php.

$.get('path/to/get_details.php', function(data)
{
    $('#details1').html(data);
    $('#details1').css('display', 'block');
});

Note: you will need jQuery for that code to work.

于 2012-12-23T14:26:24.620 に答える