Как сдвинуть строку таблицы с помощью Jquery? - PullRequest
Новая
       32

Как сдвинуть строку таблицы с помощью Jquery?

0 голосов
/ 11 июля 2009

Мне было интересно, как я могу сдвинуть переключатель таблицы из моего скрипта.

У меня есть php-файл, который включен в html-страницу внутри div, называемого output-lists.

PHP ФАЙЛ: 

<?php
function outputListingsTable()
{
    $mysql = new mysqli('localhost', 'root', 'root', 'ajax_demo') or die('you\'re dead');
    $result = $mysql->query("SELECT * FROM explore") or die($mysql->error);

    if($result) 
    {
        echo "<div class=\"main-info\"> \n";
            echo "<table class=\"listings\"> \n";
                echo "<tbody> \n";

                    while($row = $result->fetch_object()) 
                    {
                        $id = $row->id;
                        $siteName = $row->site_name;
                        $siteDescription = $row->site_description;
                        $siteURL = $row->site_url;
                        $sitePrice = $row->site_price;


                        echo "  <tr id=\"more-info-" .$id. "\" class=\"mi-" .$id. "\"> \n";
                                echo "  <td> \n";
                                echo "      <div id=\"more-" .$id. "\" class=\"more-information\"></div> \n";
                                echo "  </td> \n";
                        echo "  </tr> \n";

                        echo "  <tr id=\"main-info-" .$id. "\"> \n";
                        echo "      <td>" . $siteName . "</td> \n";
                        echo "      <td>" . $siteURL . "</td> \n";
                        echo "      <td><a id=\"link-" . $id . "\" class=\"more-info-link\" href=\"#\">More info</a></td> \n";  
                        echo "  </tr> \n";
                    }
        echo "</tbody> \n";
    echo "</table> \n";
echo "</div> \n";           

    }

}

?>

Как видно из приведенного выше сценария, создаются динамические идентификаторы и классы, что смущает меня при выборе их с помощью Jquery.

Вот jquery, который у меня есть, но он не работает, к сожалению. 

$(function() {

$("a.more-info-link").click(function() {

$("#more-info-" + this.id).load("getinfo.php").slideToggle("slow");

return false;

});

});

Любая помощь будет великолепна.

Ответы [ 2 ]

2 голосов
/ 11 июля 2009

Вместо нацеливания на строку, вложите содержимое в div внутри строки и примените анимацию к div. 

<html>
    <head>
        <title>SandBox</title>       
    </head>
    <body>
        <table>
            <tr>
                <td>
                    <div id="divMoreInfo">
                        some text or whatever goes here.
                    </div>
                </td>
            </tr>
            <tr id="main-info-">
                <td>
                    <a id="link" href="#">More info</a>
                </td>
            </tr>
        </table>
    </body>
</html> 
<script src="js/jquery.js" type="text/jscript" ></script>
<script type="text/javascript">
    $("#link").click(function() {
        $("#divMoreInfo").slideToggle(200);
    });
</script>
0 голосов
/ 11 июля 2009 
$("a.more-info-link").click(function() {
    var id = $(this).attr("id").substring(4); // This extract the id from the link's id field
    $(#more-info-" + id).load("getinfo.php", function() {
        $(this).slideToggle("slow");
    }); // I suppose you want to toggle after the content was loaded? or you can keep your statement
});

Посмотри, работает ли оно?

...