Question

我想更改特定单击表行的背景颜色。它还应将其更改回原始颜色。从红色到绿色来回移动。并且还应该选中该复选框。绿色=选中复选框/红色=未选中复选框。

行看起来像这样 <tr id="<?php echo $row['id'] ?>" value="<?php echo $row['id'] ?>">

对于JQUERY，我有这个：

$(document).ready(function() {
    $('.table tr').click(function(event) {
        var id = $(this).attr('id');
        var bcolor = $('.task').css('background-color');

        console.log(id);
        console.log(bcolor);

if (event.target.type !== 'checkbox') {
            $(':checkbox', this).trigger('click');

            if (bcolor == 'rgb(205, 92, 92)') {
                $('.task').css('background-color', 'green');
            } else {
                $('.task').css('background-color', 'indianred');
            }
        };



    });
});

如何使用var id = $(this).attr('id');来仅更改特定单击行的背景颜色？

现在，通过单击任意一行，使每一行变为绿色。

整个main.php：

标题

<?php include 'taskpdo.php';?>


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>To Do List</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="jquery-3.4.1.min.js"></script>
    <script src="script.js"></script>
</head>

身体

<body>
    <!-- CONFIRM MESSAGE -->
    <?php if (isset($_SESSION['message'])): ?>
    <div class="msg">
        <?php
            echo $_SESSION['message'];
            unset($_SESSION['message']);
        ?>
    </div>
    <?php endif?>

    <div class="spacer">
        <!-- Heading -->
        <div class="heading">
            <h2>To Do List</h2>
        </div>

        <!-- Userinformation -->
        <div class="logout">
            <?php if (isset($_SESSION['username'])): ?>
            <p>Welcome<strong><?php echo $_SESSION['username']; ?></strong></p>
            <p><a href="main.php?logout='1'">logout</a></p>
            <?php endif?>
        </div>
    </div>

表

    <table class="table">
    <thead>
            <tr>
                <th>Check</th>
                <th>UID</th>
                <th>Username</th>
                <th>Num</th>
                <th>Tasks</th> 
                <th>Edit</th>               
                <th>Delete</th>
            </tr>
        </thead>
            <tbody>
            <?php

$tasks = sqlsrv_query($db,
                "SELECT * FROM todo 
                join registrieren  
                on username = ersteller 
                where username = '" . $_SESSION['username'] . "'");

行

$i = 1;
while ($zeile = sqlsrv_fetch_array($tasks)) {
    ?>

            <tr id="<?php echo $zeile['id'] ?>" type="checkbox" name="check[]" value="<?php echo $zeile['id'] ?>">

                <td class="task"><input type="checkbox" id="check--<?php echo $zeile['id'] ?>"></td>
                <input type="hidden" name="id" value="<?php echo $zeile['id']; ?>"> 
                <td class="task" ><?php echo $zeile['uid'] ?></td>
                <td class="task" ><?php echo $zeile['username'] ?></td>
                <td class="task" ><?php echo $zeile['id'] ?></td>
                <td class="task" id="<?php echo $zeile['id'] ?>" ><?php echo $zeile['task'] ?></td>  

                <td class="task" onclick="myFunction(<?php echo $zeile['id'] ?>)">
                    <form method="post" action="main.php">
                        <button type="submit" name="edit">                                                                
                            Edit
                         </button>
                         <input type="hidden" name="id" value="<?php echo $zeile['id']; ?>"> 
                         <input type="hidden" name="task" value="<?php echo $zeile['task']; ?>">    
                    </form>
                </td>


                <td class="task" onclick="myFunction(<?php echo $zeile['id'] ?>)">    
                    <form method="post" action="main.php" >
                         <button type="submit" name="delete">                                          
                            Delete
                         </button>
                         <input type="hidden" name="id" value="<?php echo $zeile['id']; ?>">
                    </form>
                </td>

            </tr>

            <?php
$i++;}
?>


        </tbody>

    </table>

按钮



    <form method="post" action="main.php" class="input_form">


        <input type="hidden" name="ersteller" value="<?php echo $_SESSION['username']; ?>">     


        <?php 

        if ($update == true): ?>  
        <input type="text" name="task" class="task_input" value="<?php echo $task ?>">      
        <button type="submit" name="update" id="add_btn" class="add_btn">Update</button>
        <input type="text" name="id" value="<?php echo $id ?>">


        <?php else: ?>
        <input type="text" name="task" class="task_input">
        <button type="submit" name="addtask" id="add_btn" class="add_btn">Add Task</button>
        <input type="hidden" name="id" value="<?php echo $id ?>">       
        <?php endif ?>

    </form>   
</body>

</html>

Answer 1

您可以使用jQuery的toggleClass：

// css for put in your element
.common-class {
    background-color: #ff0000; // replace for your color
}

.highlight-class {
    background-color: #0000ff !important; // replace for your color
}

$('your-selector').toggleClass('highlight-class'); // jQuery

Answer 2

Bensilson的回答对我有帮助，我想澄清一下我所做的事情：

我删除了class='task'内的<td>，并将其放入<tr>-标记中。

我在CSS内完成了.highlighttask{background-color: green !important}。

在js中，我已经完成

$(document).ready(function() {

    $(".table tr").on('click', function() {
        var checked = $(this).find('input[type="checkbox"]');
        checked.prop('checked', !checked.is(':checked'));
        $(this).toggleClass('highlighttask');

    });

});

现在，它覆盖特定行的背景色，并选中特定行的复选框。谢谢！

在特定表格行上单击更改背景颜色

2 个答案: