Question

我正在尝试添加和删除该行的单元格2单元格的文本。

假设他们在桌子上有4列，并希望在页面的不同部分显示/隐藏某些行。

我的目标是根据复选框值（0 | 1）添加/显示和删除/隐藏所选行值。对于每个行值，它应该有一个按钮/链接（X）来删除它并取消选中表中的复选框。

<h1 style="text-align:center">Selector/Removal</h1>
<h4 class="selected_values"></h4>
<button onclick="clearSelection();">Clear</button>

<table id="" class="table table-bordered table-responsive table-striped">
    <tr class="" style="background-color: #237ec2; color: white;">
      <td class="text-center"><span>A</span></td>
      <td class="text-center"><span>B</span></td>
      <td class="text-center"><span>C</span></td>
      <td class="text-center"><span>D</span></td>

    </tr>

    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A1</span></td>
      <td>
        <h5>B1</td>
      <td>
        <h5>C1</h5></td>
      <td>
        <h5>D1</h5></td>

    </tr>
    <tr>
      <td>
        <input type="checkbox" class="usercheck"><span>A2</span></td>
      <td>
        <h5><span class="second_col">B2</span></h5></td>
      <td>
        <h5>C2</h5></td>
      <td>
        <h5>D2</h5></td>

    </tr>
    <tr style="">
      <td>
        <input type="checkbox" class="usercheck">
        <span>A3</span></td>
      <td>
        <h5><span class="second_col">B3</span></h5></td>
      <td>
        <h5>C3</h5></td>
      <td>
        <h5>D3</h5></td>

    </tr>

  </table>

我尝试过的JavaScript如下：

   $(document).ready(function() {

            $('.usercheck').change(function() {
                $('.selected_values').empty();
                $(".usercheck:checked").each(function(index) {
                    var chain = "";
                        chain = $(this).html(".usercheck").val();
                        $('.selected_values').append(chain  + '&nbsp;' +  '<a href="#"><span id="removeVal"  style="color:red;">X</span></a>');
                       });
            });

        });
        function clearSelection(){
            $('.selected_values').empty();
            $('.usercheck').attr('checked','false');
        }

这是我尝试工作的js小提琴的链接。我能够显示内容，但只给一个列赋值，这不是我认为的正确方法。

https://jsfiddle.net/rahilAhmed/y4fzj66o/

Answer 1

您可以执行此操作：JsFiddle

对于未选中的复选框，您必须执行以下操作：

.prop('checked', false);

Answer 2

如果不重新编写整个HTML，我就是这样做的。

我所做的是为每个创建的跨度添加了一个ID。该ID稍后用于迭代所有复选框，并找到需要取消选中的复选框，然后取消选中它。

                $(document).ready(function() {
                $('.usercheck').change(function() {
                    $('.selected_values').empty();
                    $(".usercheck:checked").each(function(index) {
                        var chain = "";
                            chain = $(this).html(".usercheck").val();
                            $('.selected_values').append(chain  + '&nbsp;' +  '<a href="#"><span id='+ chain + ' class="removeVal" style="color:red;">X</span></a>'); 
                           });
                           $(".removeVal").click(checkRemove);
                });
            });
            
            function checkRemove(e) {
                var removeId = e.target.id;
                $(".usercheck").each(function(index,checkbox) {
                    if (checkbox.value == removeId) {
                        checkbox.checked = false;
                    }
                });
                e.target.parentNode.previousSibling.remove();
                e.target.remove();
            }
       
            function clearSelection(){
                $('.selected_values').empty();
                $('.usercheck').prop('checked',false);
            }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="container">
            <div class="row">
                <div class="col-xs-12">
                    <h1 style="text-align:center">Selector/Removal</h1>
                </div>
            

            </div>
            <br>

            <div class="row">
                <div class="col-xs-3">
                    Selected Users
                    <div class="" >
                        <h4 class="selected_values"></h4>
                    </div>
                </div>
                    <div class="col-xs-1"><button   onclick="clearSelection();">Clear</button></div>
                <div class="col-xs-8">
                    <table id="" class="table table-bordered table-responsive table-striped">
                        <tr class="" style="background-color: #237ec2; color: white;">
                            <td class="text-center" ><span >A</span></td>
                            <td class="text-center" ><span >B</span></td>
                            <td class="text-center" ><span >C</span></td>
                            <td class="text-center" ><span >D</span></td>
                            
                        </tr>

                        <tr style="">
                            <td ><input type="checkbox" class="usercheck" value="A1[B1]"><span class="first_col" value="A1" >A1</span></td>
                            <td><h5><span class="second_col">B2</span></h5></td>
                            <td><h5>C1</h5></td>
                            <td><h5>D1</h5></td>
                            
                        </tr>
                        <tr style="">
                            <td ><input type="checkbox" class="usercheck" value="A2[B2]"><span class="first_col" value="a2" >A2</span></td>
                            <td><h5><span class="second_col">B2</span></h5></td>
                            <td><h5>C2</h5></td>
                            <td><h5>D2</h5></td>
                            
                        </tr>
                        <tr style="">
                            <td ><input type="checkbox" class="usercheck" value="A3[B3]">
                            <span class="first_col" value="a3" >A3</span></td>
                              <td><h5><span class="second_col">B3</span></h5></td>
                            <td><h5>C3</h5></td>
                            <td><h5>D3</h5></td>
                            
                        </tr>
                        
                    </table>


                </div>
                
                
            </div>
        </div>

添加/删除选中的行（Javascript / Jquery）

2 个答案: