Question

我有一篇论文＆＃39;包含6行2列的表。在第一列是复选框，第二行是纸张的标题。一旦用户检查了2个复选框，我希望具有未选中复选框的行移动到已检查复选框的行下方。

我可以让复选框本身移动但不是整行！非常感谢您愿意给予的任何帮助，提前谢谢：）

＆＃13;

        function core2() {
            var i = 0;

            $('.ATT').each(function () { if ($(this).is(':checked')) { i += 1 } });
            });

            if (i < 2 ) {
                $(".ATT:not(:checked)").insertBefore("#core2");

            };


            if (i == 2) {
                $(".ATT:not(:checked)").insertAfter("#core2");
               

            };

        }

＆＃13;

    <table>
      <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 1
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX2"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 2
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX3"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 3
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX4"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 4
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX5"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 5
          </td> <td>
          </label></td></tr>
    <tr class="core1" ><td><input type = "checkbox" name="examlist"  value="ATTPTAX" id="ATTPTAX6"  class="ATT" onclick ="if(core2()){this.checked=false};" /></td> <td 
          PAPER 6
          </td> <td>
          </label></td></tr>
<tr id="core2"><td>Core 2</td><td></td></tr>
</table>

＆＃13;

利奥

Answer 1

要在另一个表格行之前插入表格行（tr），您需要为每个行添加一个单义ID，然后使用以下代码：

function InsertRowBefore(rowId) {
  var target = document.getElementById(rowId);
  var element = document.createElement('tr');
  target.parentNode.insertBefore(element, target);
  return element;
}

Answer 2

将您的HTML设为

<table>
      <tr class="core1" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT"/>
        </td> 
        <td>
            PAPER 1
        </td> 
      </tr>
      <tr class="core" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" />
        </td> 
        <td>
            PAPER 2
        </td> 
      </tr>
      <tr class="core" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" />
        </td> 
        <td>
            PAPER 3
        </td> 
      </tr>
      <tr class="core" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" />
        </td> 
        <td>
            PAPER 4
        </td> 
      </tr>
      <tr class="core" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT" />
        </td> 
        <td>
            PAPER 5
        </td> 
      </tr>
      <tr class="core" >
        <td>
        <input type = "checkbox" name="examlist[]"  value="ATTPTAX" id="ATTPTAX1"  class="ATT"/>
        </td> 
        <td>
            PAPER 6
        </td> 
      </tr>
</table>

您的Jquery代码将是：

$('input[type=checkbox]').click(function(){
  var index = 0;
  $('input:checked').each(function(){
    $('table').prepend($(this).parents('tr'));
    index++;
  })
});

请参阅小提琴：https://jsfiddle.net/ys219mbt/1/

根据复选框中包含的复选框进行移动

2 个答案: