如何將可點擊的行連接到從數據庫檢索的特定數據部分？

Question

標題可能有點誤導，但很難用語言表達。

我一整天都在嘗試，即使從stackoverflow嘗試也失敗了，所以我必須再次尋求幫助。

我正在從MySQL檢索文章信息列表，並將其顯示在表格中。 一旦顯示了這些表行，就可以使用jQuery .click .click function單擊它，單擊ckeditor（帶有display:none; ）時，它會從<section></section>打開並隱藏整個表。

我遇到的問題是，當我單擊一行時，它應該顯示ckeditor中特定文章的數據，但是即使我單擊另一行，無論第一行數據始終顯示什么，我都可以指出由於這是由於沒有ID，因此.click函數無法區分它試圖顯示的部分，但是我無法弄清楚如何將表與部分信息連接起來。

這就是我使用foreach檢索數據並將其顯示在表中的方式。

<?php
$getInfo = $articleClass->get_all_article_info();

foreach($getInfo as $data)
{
    $article_title        = $data['article_title'];
    $article_content      = substr(htmlentities($data['article_content']),0,50).'...';
    $article_content_full = $data['article_content'];
    $article_uid          = $data['article_uid'];

    echo '
        <tr id="tr_id" class="'.$article_uid.'">
            <td class="marker">
                <i class="fa fa-align-left"></i>
            </td>

            <td class="title">
                '.$article_title.'
            </td>

            <td class="content">
                '.$article_content.'
                </td>
        </tr>

        <section id="post_info_id" style="display:none;">
            <textarea id="editor1">
                <div style="width:468px;">
                    '.$article_content_full.'
                </div>
            </textarea>
        </section>
    ';
}
?>

這就是點擊功能； jQuery的。

<script type="text/javascript">
$(document).on('click', '#tr_id', function ()
{
    $("#post_info_id").css("display", "block");
    $("#table_id").hide();
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};
</script>

我知道問題在於，當我單擊tr ，它無法區分#post_info_id ，因為它僅檢索約20行信息，但是$post_info_id沒有特定的ID與#tr_id匹配，但是我不知道我什至可以做到這一點..我已經檢索了article_uid，這是將文章插入數據庫時​​的遞增數字，可以用它來標記#tr_id和#post_info_id但是使用jQuery我不知道如何完成經過我的嘗試。

考慮到我寫的越多，得到答案的可能性就越小，但我不想對此提一個冗長的問題，但這是我嘗試的方法。

我嘗試將article_uid設置為id，但是由於它們是隨機的，因此無法檢索它們的id，並且沒有具體說明我可以使用.attr('id')來連接post_info_id和tr_id。

Answer 1

這可以通過使用Jquery next()函數來實現。

您可以將onclick方法更改為：

$(document).on('click', '#tr_id', function ()
{
     $(this).next('section').css("display", "block");
     $("#table_id").hide();
});

並且所有元素都應始終具有唯一的ID，因此這是一種實現方法：

'<section id="post_info_id"'.$counter.' style="display:none;">
     <textarea id="editor'.$counter.'">
         <div style="width:468px;">
             '.$article_content_full.'
         </div>
     </textarea>
 </section>'

然后聲明一個變量以使計數保持在循環之外：

$counter = 0;

最后，在循環結束時增加計數器：

$counter++;