如何将可点击的行连接到从数据库检索的特定数据部分？

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++;