使用 mysql 行值在 html 中动态创建按钮

Question

我正在从我的 sql 数据库中提取我的所有信息，并将其显示在 table 中的 html 中。我希望能够单击每行末尾或该行某处的按钮，并显示与该行中的 uniqueID 相关的另一组内容。但是目前，每个动态创建的按钮的值都不会改变。

$sql = "SELECT * FROM Hybrid";
$result = mysqli_query($link, $sql);

if ($result->num_rows > 0) {
    echo "<table><tr><th>ID</th><th>Timestamp</th><th>Rate</th><th>Fiat</th><th>BTC</th><th>BTCadd</th><th>Contact</th><th>PaymentMethod</th><th>Bank</th><th>localprofile</th><th>BTname</th><th>uniqID</th><th>Confirm2</th><th>Paymentmade</th><th>Paymenttime</th></tr>";
    // output data of each row
    while ($row = $result-> fetch_assoc()) {
        echo "<tr><td>".$row["ID"].
        "</td><td>".date('d-m H:i', strtotime($row["Timestamp"])).
        "</td><td>".$row["Rate"].
        "</td><td>".$row["Fiat"].
        "</td><td>".$row["BTC"].
        "</td><td>".$row["BTCadd"].
        "</td><td>".$row["Contact"].
        "</td><td>".$row["PaymentMethod"].
        "</td><td>".$row["Bank"].
        "</td><td>".$row["localprofile"].
        "</td><td>".$row["BTname"].
        "</td><td>".$row["uniqID"].
        "</td><td>".$row["Confirm2"].
        "</td><td>".$row["Paymentmade"].
        "</td><td>".date('d-m H:i', $row["Paymenttime"]).
        "</td><td>".
        "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>".
        "</td></tr>";
    }
    echo "</table>";
}

这个位是按钮：

 <td>" . "<button id='view' type='button' value='$row[uniqID]' onclick='dropdown();' >View</button>" . "</td>

和 $row['uniqID'] 在 html 中显示我的 table 上所有不同的 uniqID，但是，当我在 javascript 中尝试此操作时：

<script>
    var id = document.getElementById("view").value;

    function dropdown() {
        alert(id);
    };
</script>

无论我按下哪个按钮，它只会提醒第一个 $row['uniqID']，而不是与该行对应的按钮。

我需要按钮的值对应于该行的 uniqueID，所以我可以在按钮函数中使用它，也许还有其他方法？

我不知道如何做到这一点，我认为这可能与 'infamous javascript loop issue' 有关，但我不确定它是否适用，或者是否确实如此如何解决？

Answer 1

id是唯一的，但是你有n个id='view'。因此，由于应该只有 1 id='view' javascript 只会找到第一个。您可以将 this.value 添加到函数调用 -

"<td>" . 
"<button id='view' type='button' value='$row[uniqID]' onclick='dropdown(this.value);' >View</button>" .
"</td>"

然后在您的函数中使用它

<script>
 function dropdown(id){
     alert(id);
 }
</script>

使用 mysql 行值在 html 中动态创建按钮

Dynamically creating buttons in html with mysql row value

html

javascript

php

mysql

dynamic