使用onclick方法从父标记获取单个子值

I want to get individual table id value with individual button click. and i got the table id value but it shows all table id value's like (1234... 10). How to get the individual table value (like clicking 3rd button -> get 3rd table id only). I am using both php and html code together.

我希望通过单击按钮获得单个表ID值。我得到了表id值，但它显示了所有表id值（1234 ... 10）。如何获取单个表值（如单击第3个按钮 - >仅获取第3个表ID）。我一起使用php和html代码。

This is my code.

这是我的代码。

<table>
    <tr>
        <td><b>S.No</b></td>
        <td><b>User Name</b></td>
        <td><b>Post Title</b></td>
        <td><b>Post Date</b></td>
    </tr>
    <?php
            require_once('databaseconnection.php');
            $query  = "SELECT * FROM `userpost`";
            $result = mysql_query($query);
            while($row = mysql_fetch_array($result, MYSQL_ASSOC))
            {
            ?>
        <tr>
            <td style="width: 5%;" id="td_id" value="<?php echo " {$row[ 'postid']} "; ?>">
                <?php echo "{$row['postid']}"; ?>
            </td>
            <td style="width: 15%;" id="td_user">
                <?php echo "{$row['postuser']}"; ?>
            </td>
            <td style="width: 65%;" id="td_title">
                <?php echo "{$row['posttitle']}"; ?>
            </td>
            <td style="width: 10%;">
                <?php echo "{$row['postdate']}"; ?>
            </td>
            <td style="width: 5%;"><input id="getpostid" type="submit" value="view" onclick="actiongetpostid();"></input>
            </td>
        </tr>
        <?php
            }
            ?>
</table>

<script type="text/javascript">
    function actiongetpostid() {
        var tdid = $('tr').children('#td_id').text();
        alert(tdid);

    }
</script>

HTML code: This table will create dynamically.

HTML代码：此表将动态创建。

<tr>
    <td style="width: 5%;" id="td_id" value="1">1</td>
    <td style="width: 15%;" id="td_user">rose</td>
    <td style="width: 65%;" id="td_title">YII2 framwork for PHP</td>
    <td style="width: 10%;">2016-02-12</td>
    <td style="width: 5%;"><input id="getpostid" type="submit" value="view" onclick="actiongetpostid();"></input>
    </td>
</tr>
<tr>
    <td style="width: 5%;" id="td_id" value="2">2</td>
    <td style="width: 15%;" id="td_user">rose</td>
    <td style="width: 65%;" id="td_title">Angular JS</td>
    <td style="width: 10%;">2016-02-12</td>
    <td style="width: 5%;"><input id="getpostid" type="submit" value="view" onclick="actiongetpostid();"></input>
    </td>
</tr>
<tr>
    <td style="width: 5%;" id="td_id" value="3">3</td>
    <td style="width: 15%;" id="td_user">murali</td>
    <td style="width: 65%;" id="td_title">EXT JS</td>
    <td style="width: 10%;">2016-02-12</td>
    <td style="width: 5%;"><input id="getpostid" type="submit" value="view" onclick="actiongetpostid();"></input>
    </td>
</tr>

I am using this code within "while" loop so how to solve this issue. Please help me.

我在“while”循环中使用此代码，以便如何解决此问题。请帮帮我。

1 个解决方案

#1

Firstly, I'm not sure why you are using <input> tags if you are just wanting to display the data. Use <button> tags instead.

首先，如果您只是想显示数据，我不确定为什么要使用标签。请改用

On this note I would change your button td to something like:

在这个笔记上我会将你的按钮td更改为：

<td style="width: 5%;"><button class="getpostid">View</button>

Note the use of class="getpostid". The use of id would only apply to the first element with getpostid as IDs can only be used once.

注意使用class =“getpostid”。 id的使用仅适用于具有getpostid的第一个元素，因为ID只能使用一次。

Then using jQuery:

然后使用jQuery：

$(document).ready(function(){
    $('.getpostid').click(function(){
        var tdid = $(this).parents('tr').find('#td_id').text();
        alert(tdid);
    });
});

Note the use of parents() instead of parent(). The latter can only go up one level in the DOM tree. Whereas the step needed is 2 levels.

注意使用parents（）而不是parent（）。后者只能在DOM树中上升一级。而所需的步骤是2个级别。

Here is a JSFiddle with a working example.

这是一个带有工作示例的JSFiddle。

#1