Question

我是Java Scripting的新手，任何人都可以帮助下面的代码。我尝试将选中的复选框行移动到表格的顶部。下面的代码是第一次工作，但是当我再次尝试时，它并不是最重要的。这是我的JavaScript。在这里，我使用Javascript动态添加了复选框。

$(document).on('change', '[type=checkbox]', function () {

alert("Chk box clicked"+ rl);
//var s1 = $(this).context.status;

//var direction = $(this).attr('data-direction');
var $original = $(this).parents("tr:first");
var $target = $(this).context.status === true ? $original.prev() : $original.next();
var firstrw = tblrw.rows[0].innerText;
var lastrw = tblrw.rows[(tblrw.rows.length)-1].innerText

if ($target.length && $(this).context.status == true)
{
    //for (var i = $target.length; i <= 0; i--) {
    $original.insertBefore($('#chk' + firstrw), ($target));

}
else if ($target.length)
{
    $original.insertAfter($target);
}

}）;

请尽快帮助。提前感谢您的帮助。

Answer 1

基本代码：

$('table').on('change', '[type=checkbox]', function () {
  var $this = $(this); // refers to checkbox
  var row = $this.closest('tr'); // row with changed checkbox

  if ( $this.prop('checked') ){ // move to top
    row.insertBefore( row.parent().find('tr:first-child') ); 
  }
  else { // move to bottom
    row.insertAfter( row.parent().find('tr:last-child') );  
  }
});

要运行的代码段并查看其工作原理。加上jsfiddle http://jsfiddle.net/51rbk65t/

$('table').on('change', '[type=checkbox]', function () {
     var $this = $(this);
     var row = $this.closest('tr');
     if ( $this.prop('checked') ){ // move to top
        row.insertBefore( row.parent().find('tr:first-child') )
            .find('label').html('move to bottom'); 
     }
     else { // move to bottom
        row.insertAfter( row.parent().find('tr:last-child') )
            .find('label').html('move to top');  
     }
});

th, td { border: 1px solid #d4d4d4; }
thead tr { background-color: #F5F5F5; }
tr.c1 { background-color: #D2FFA5; }
tr.c2 { background-color: #FFEFBF; }
tr.c3 { background-color: #FFCDE3; }
tr.c4 { background-color: #CFCDFF; }
tr.c5 { background-color: #CDFFE9; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <thead>
        <tr>
            <th>ID</th>
            <th>Title</th>
            <th>Action</th>
        </tr>
    </thead>
    <tbody>
        <tr class="c1">
            <td>1</td>
            <td>Title 1</td>
            <td><input type="checkbox" id="c_1" /><label for="c_1">move to top</label></td>
        </tr>
        <tr class="c2">
            <td>2</td>
            <td>Title 2</td>
            <td><input type="checkbox" id="c_2" /><label for="c_2">move to top</label></td>
        </tr>
        <tr class="c3">
            <td>3</td>
            <td>Title 3</td>
            <td><input type="checkbox" id="c_3" /><label for="c_3">move to top</label></td>
        </tr>
        <tr class="c4">
            <td>4</td>
            <td>Title 4</td>
            <td><input type="checkbox" id="c_4" /><label for="c_4">move to top</label></td>
        </tr>
        <tr class="c5">
            <td>5</td>
            <td>Title 5</td>
            <td><input type="checkbox" id="c_5" /><label for="c_5">move to top</label></td>
        </tr>
    </tbody>
</table>

在复选框上将JavaScript移动到表格顶部的行

1 个答案: