Javascript 如何在单击按钮时更改整行的颜色_Javascript_Jquery

Javascript 如何在单击按钮时更改整行的颜色

javascript jquery

Javascript 如何在单击按钮时更改整行的颜色,javascript,jquery,Javascript,Jquery,您好，我是javascript/jquery新手。我有一个页面，用户可以在其中接受或拒绝请求。我想根据按下的按钮更改整行的颜色。如果按下“接受”按钮，则整行应更改为红色，而“拒绝”按钮应更改为绿色 <html> <head> <title>MRA</title> <script type="text/javascript"> function Accept() { alert("You have

您好，我是javascript/jquery新手。我有一个页面，用户可以在其中接受或拒绝请求。我想根据按下的按钮更改整行的颜色。如果按下“接受”按钮，则整行应更改为红色，而“拒绝”按钮应更改为绿色

<html>
<head>
    <title>MRA</title>
    <script type="text/javascript">
    function Accept() {
        alert("You have Accepted the Request!!");
    }
    function Reject() {
        alert("You have Rejected the Request!!");
    }
    </script>
</head>
<body>
    <h1 align="center">Book</h1>
    <table align="center" width="100%">
        <tr>
            <td>
<?php
$result = mysqli_query($conn,"SELECT * from table  ");
echo "
    <table border='1' id='mytable' width='100%'>
        <tr>
            <th>Id</th>
            <th>User Name</th>
            <th>Purpose</th>
            <th>Attendee</th>
            <th>Date </th>
            <th>StartTime</th>
            <th>EndTime</th>
            <th>Response</th>
        </tr>";
while($row = mysqli_fetch_array($result)) {
    echo "<tr>";
    echo "<td align='center'><input type='text' readonly size='1' name='textid' value=". $row['id']. "></td>";
    echo "<td align='center'>" . $row['name'] . "</td>";
    echo "<td align='center'>" . $row['purpose'] . "</td>";
    echo "<td align='center'>" . $row['attendee'] . "</td>";
    echo "<td align='center'>" . $row['date'] . "</td>";
    echo "<td align='center'>" . $row['starttime'] . "</td>";
    echo "<td align='center'>" . $row['endtime'] . "</td>";
    echo "<td align='center'>" . '<input type="button" value="Accept" name="txtaccept" onclick="Accept()">&nbsp;&nbsp;&nbsp;<input type="button" value="Reject" name="txtreject" onclick="Reject()">' . "</td>";
    echo "</tr>";
}
echo "</table>";
?>
            </td>
        </tr>
    </table>
</body>
</html>


磁共振
函数Accept（）{
警报（“您已接受请求！！”；
}
函数拒绝（）{
警报（“您已拒绝请求！！”；
}
书

在body标签结束前，写下以下代码：

    <script type="text/javascript">
    $(document).ready(function() {
       $("input[name=txtaccept]").on("click", function() {
         $( this ).parent().parent().css( "background-color", "red" );
       });
       $("input[name=txtreject]").on("click", function() {
         $( this ).parent().parent().css( "background-color", "green" );
       });
    });
    </script>
    </BODY>


$（文档）.ready（函数（）{
$（“输入[name=txtaccpt]”）。在（“单击”，函数（）{
$（this.parent（）.parent（）.css（“背景色”、“红色”）；
});
$（“输入[name=txtreep]”）。在（“单击”，函数（）上{
$（this.parent（）.parent（）.css（“背景色”、“绿色”）；
});
});

对于脚本部分：

<script type="text/javascript">
function Accept(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "accepted";
}
function Reject(el)
{
   var tr = el.parentNode.parentNode; //tr
   tr.className = "rejected";
}
</script>

及

我试着使用这个函数&它工作得很好，Accept（e）{e.parentNode.parentNode.style.backgroundColor='red'；}&onClick=“Accept（this）”，但刷新时颜色消失。@Ankit我写的东西也正确。可能是因为其他问题，这对你不起作用。现在你们已经找到了答案，所以我认为问题已经解决了。对吗？这个accept函数与某个东西冲突，所以将它重命名为Accept1，我认为它应该可以工作。像这样，先生，它有帮助，但代码将整个表更改为特定的颜色，我希望它仅用于特定的行。当我从数据库获取数据时..刷新时为什么颜色没有保留？先生，我被刷新卡住了。颜色消失在刷新时会消失，您应该在接受/拒绝函数中添加一些代码，以便使用ajax将状态传递给服务器。在php呈现端，您应该检查此状态以将class=“rejected”/class=“accepted”分配给tr元素。

<style type="text/css">
table { border-collapse: collapse; } //to remove cell spacings
table td { padding: 2px; }
tr.accepted, tr.accepted td { background-color: green; }
tr.rejected, tr.rejected td { background-color: red; }
</style>

onclick="Accept(this)"

onclick="Reject(this)" //to pass the input elements to the functions