Question

我在tr标签的末尾有一个编辑按钮我想在表格中禁用输入类型复选框然后点击我要编辑所有输入类型的tr复选框将启用编辑然后当我点击再次编辑然后它将再次禁用想法是编辑tr编辑点击请建议我这里的合适代码是我的代码。

<table class="table table-hover table-striped">
                            <thead>
                        <tr style="background-color:#d2d6de;border:2px ridge gray;">
                                <td class="mailbox-name">Name</td>
                                <td class="mailbox-name">Post</td>
                                <td class="mailbox-name">Content Moderation</td>
                                <td class="mailbox-name">Money Manager</td>
                                <td class="mailbox-name">Parking Manager</td>
                                <td class="mailbox-name">Notify User</td>
                                <td class="mailbox-name">User Moderation</td>
                                <td class="mailbox-name">Facility Manager</td>
                                <td class="mailbox-name">Asset Manager</td>
                                <td class="mailbox-name">Move In Move Out</td>
                                <td class="mailbox-name">Handling Issues</td>
                                <td class="mailbox-name">Inventory</td>
                                <td class="mailbox-name">Visitors</td>
                                <td class="mailbox-name">Can Add/Edit Committee Members</td>
                                <td class="mailbox-name">Action</td>
                            </font>
                        </tr>
                    </thead>
                <tbody>
                    <?php
                            while($row=mysqli_fetch_assoc($res)){

                    ?>
                <tr>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>" style="padding-top:25px;"><b><?php echo $row["FirstName"] . " " . $row["LastName"];?></b></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>" style="padding-top:30px;"><?php echo $row["role"];?></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>
                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>"><center style="padding-top:20px;"><input type="checkbox" class="cheakedit"></center></td>


                    <td class="mailbox-name" id="<?php echo $row["Id"]; ?>" style="widht:20px;"><center><button  class="btn btn-sm btn-primary" id="<?php echo $row["Id"]; ?>"><i class="fa fa-edit"></i></button><div style="height:3px;"></div><button class="btn btn-sm"><i class="fa fa-trash"></i></button></center></td>
            </tr>    
                <?php } ?>

                </tbody>
                    </table>

Answer 1

以下是fiddle。

<强> HTML

<table>
  <tr>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><span class="edit">Edit</span></td>
  </tr>
   <tr>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><span class="edit">Edit</span></td>
  </tr>
   <tr>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><span class="edit">Edit</span></td>
  </tr>
   <tr>
   <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><input type="checkbox" disabled></td>
    <td><span class="edit">Edit</span></td>
  </tr>
</table>

<强> JS

$(function() {
   $( "table" ).on( "click", ".edit", function() {
      $(this).removeClass('edit');
      $(this).addClass('removeEdit');
        $(this).parents('tr').find('input[type=checkbox]').prop('disabled', false);
        });

    $( "table" ).on( "click", ".removeEdit", function() {
      $(this).removeClass('removeEdit');
      $(this).addClass('edit');
        $(this).parents('tr').find('input[type=checkbox]').prop('disabled', true);
        });
});

希望这是你所需要的！

Answer 2

我建议您使用jQuery.ToggleClass()切换按钮上的课程。然后，您可以检查click（）函数，该函数可以查看当前类并应用您想要的功能。

$(".myBtn").click(function(){
  $(this).toggleClass("editmode");
    if($(this).hasClass("editmode")){
      alert("Is in editmode")
    } else{
      alert("is not in editmode");
   }
);

这个非常基本的JSFiddle可以将其可视化。

单击按钮启用并禁用输入以使用jquery编辑tr

2 个答案: