为什么表行不可点击，从MySQL＆amp; amp; jQuery .click函数？

Question

我已经检索了来自MySQL table的所有数据并在表格行中回显，一旦点击就会出现文本编辑器，虽然只有第一个结果是可点击的，而其他所有结果都没有效果点击它们

foreach检索数据

$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'];

    echo '
        <tr id="tr_id">
            <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

$(document).ready(
function()
{
    $("#tr_id").click(function()
    {
        $("#post_info_id").css("display", "block");
        $("#table_id").hide();
    });
});

window.onload = function()
{
    CKEDITOR.replace( 'editor1' );
};

EX： 我得到了一份结果清单

[row 1] title1 | content1
[row 2] title2 | content2
[row 3] title3 | content3
[row 4] title4 | content4
[row 5] title5 | content5
[row 6] title6 | content6

如果单击第1行，文本编辑器将打开，隐藏tr_id并显示文本编辑器，但如果我返回索引页面并单击第2行，则为空行。我不确定这个问题是由于使用foreach还是因为jquery，我怀疑。

Answer 1

id需要独一无二。因此，在执行$("#tr_id")时，它只返回1个结果（第一个）并执行您要求的操作。更改id的{​​{1}}。

如果你很懒（但我的意思是非常懒惰）并且不关心有效的HTML，这里有2个工作选择器：

class

Answer 2

使用<tr class="tr_class">

的课程

将jquery方法更改为on tr class

$(".tr_class").click(function(){
//your code

})

因为如果你想在所有tr上使用点击事件“ID”并不适合你。