移动& lt; tr>根据复选框内是否包含<tr>检查

moving <tr> based on whether checkbox contained within the <tr> is checked

本文关键字：tr 是否 包含 检查 lt 移动 复选框      更新时间：2023-09-26

我有一个'papers'表，包含6行2列。第一列是一个复选框，第二行是论文的标题。一旦用户选中了2个复选框，我希望未选中复选框的行移动到已选中复选框的行下面。

我可以让复选框本身移动，但不是整个行!你愿意给予的任何帮助都是非常感激的，提前感谢:)

        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");
               
            };
        }
    <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>

狮子座

把你的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/

要在另一行之前插入表行(tr)，您需要为每一行添加一个唯一的id，然后使用以下代码:

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