第二次单击时切换行

时间：2015-10-27 14:42:40

标签： jquery css html-table

我有一个人的桌子，我想手动排序，但没有拖放。我只想通过点击行来选择一个人，通过点击它们选择另一个人然后两个人应该切换位置。

我选择一行没有问题，但我仍然坚持如何选择第二行。我认为使用jQuery replaceWith可以切换行。

$(document).ready(function(){

 var selections = new Array(2);

 $("tr").click(function() {

    var selected = $(this).attr('id');

    //highlight selected row
    $(this).toggleClass("marked");

  })

});

我在这里创造了一个小提琴： http://jsfiddle.net/zLz929xy/3

任何帮助或提示都会很棒。

4 个答案:

答案 0 :(得分：2)

看看我的小提琴。

我已经修改了你的小提琴结构。

很容易理解它只是得到行并检查已经存在的＆＃34;标记的＆＃34;元件。如果表有一个开关，则第一行的元素包含第二行的元素...如果需要，还可以添加var oldRowId = $(row).attr('id')和var newRowId = $(element).attr('id')以便切换行ID。 / p>

在我看来，这是一种非常简单的方法

＆＃13;
＆＃13; 
$(document).ready(function(){
    $("tr").click(function() {
        var row = $(this);
        
        var check = false;
        $.each($('#people tbody tr'), function(idx, element) {
            if($(element).hasClass('marked')) {
                // old values from row
                var oldId = $(row).find('.id').html();
                var oldName = $(row).find('.name').html();
                
                // new values 
                var rowId = $(element).find('.id').html();
                var rowName = $(element).find('.name').html();
                
                // Replace element
                $(element).find('.id').html(oldId);
                $(element).find('.name').html(oldName);
                
                $(row).find('.id').html(rowId);
                $(row).find('.name').html(rowName);
            
            	// check
                check = true;
            }
        });

        if(!check) {
            $(this).toggleClass("marked");
        } else {
            $.each($('#people tbody tr'), function(idx, element) {
            	if($(element).hasClass('marked')) {
                	$(element).toggleClass('marked');
                }
            });
        }
    })
});
＆＃13; 
html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">
  <tbody>
    <tr>
        <th class="id">ID</th>
        <th class="name">Name</th>
    </tr>

    <tr id="user_1">
        <td class="id">1</td>
        <td class="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td class="id">2</td>
        <td class="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td class="id">3</td>
        <td class="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td class="id">4</td>
        <td class="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td class="id">5</td>
        <td class="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td class="id">6</td>
        <td class="name">Marc</td>
    </tr>
  </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：0)

我做了一些更改，希望这说明了如何在不打扰数组和循环或其中任何一个的情况下完成它。我们只会将一行标记为“已标记”，因此在删除“标记”类时无需迭代或检查类。

此外，由于我们总是切换整个行，我们可以抓住所有的html，而不是将它分成单独的信息位来跟踪和操作。

$(document).ready(function(){
    // we need to be able to know the values of both the clicked rows and whether or
    // not something is selected
    var somethingSelected = false;
    var firstRow;
    var firstRowHTML;
    var secondRow;
    
    // when we click a tr, one of two things should happen - we are selecting the first
    // row, or we are picking the second row and making the switch - and which one we
    // do will depend on whether or not the somethingSelected var is true or false
    $("tr").click(function() {
        if (somethingSelected) {
            secondRow = $(this);
            firstRow.html(secondRow.html());
            secondRow.html(firstRowHTML);
            somethingSelected = false;
            $("tr").removeClass("marked");
        } else {
            somethingSelected = true;
            firstRow = $(this);
            firstRowHTML = firstRow.html();
            $(this).addClass("marked");
        }
    }); 
});
html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="people">

    <tr>
        <th id="id">ID</th>
        <th id="name">Name</th>
    </tr>

    <tr id="user_1">
        <td headers="id">1</td>
        <td headers="name">Bob</td>
    </tr>
    <tr id="user_2">
        <td headers="id">2</td>
        <td headers="name">Carl</td>
    </tr>
    <tr id="user_3">
        <td headers="id">3</td>
        <td headers="name">Jane</td>
    </tr>
    <tr id="user_4">
        <td headers="id">4</td>
        <td headers="name">Steven</td>
    </tr>
    <tr id="user_5">
        <td headers="id">5</td>
        <td headers="name">Sarah</td>
    </tr>
    <tr id="user_6">
        <td headers="id">6</td>
        <td headers="name">Marc</td>
    </tr>

</table>

答案 2 :(得分：0)

使用https://stackoverflow.com/a/698386/2314737中的交换功能：

var selections = new Array(2);

$("tr").click(function() {

  var selected = $(this).attr('id');

  //highlight selected row
  if ($('.marked').length) {
    $(this).swapWith($('.marked'));
    $('.marked').toggleClass("marked");
  }
  $(this).toggleClass("marked");
})


jQuery.fn.swapWith = function(to) {
  return this.each(function() {
    var copy_to = $(to).clone(true);
    var copy_from = $(this).clone(true);
    $(to).replaceWith(copy_from);
    $(this).replaceWith(copy_to);
  });
};
html {
 font-family: Verdana;
 font-size: 10pt;
}

td{
border: 1px solid;
}

.marked {
 background: #e5e5e5;
 font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="people">

  <tr>
    <th id="id">ID</th>
    <th id="name">Name</th>
  </tr>

  <tr id="user_1">
    <td headers="id">1</td>
    <td headers="name">Bob</td>
  </tr>
  <tr id="user_2">
    <td headers="id">2</td>
    <td headers="name">Carl</td>
  </tr>
  <tr id="user_3">
    <td headers="id">3</td>
    <td headers="name">Jane</td>
  </tr>
  <tr id="user_4">
    <td headers="id">4</td>
    <td headers="name">Steven</td>
  </tr>
  <tr id="user_5">
    <td headers="id">5</td>
    <td headers="name">Sarah</td>
  </tr>
  <tr id="user_6">
    <td headers="id">6</td>
    <td headers="name">Marc</td>
  </tr>

</table>

答案 3 :(得分：0)

我个人会在第二次选择中添加双击事件，因为单击太容易意外。

你最终可能会纠正错误。

无论如何，如果这是你要考虑的事情，你可以使用dblclick事件并有这样的事情; 

$("tr").dblclick(function(e) {
    if ($('.marked').length == 1) {
        var marked     = $('.marked').html(),
            marked_id  = $('.marked').attr('id'),
            element    = $(this).html(),
            element_id = $(this).attr('id');
        $('tr[id="'+marked_id'+"]').html(element);
        $('tr[id="'+element_id'+"]').html(marked);
        $('tr').removeClass('marked');
    }
});

您只需检查$（＆＃39; .marked＆＃39;。）长度是否为1，因为dblclick附加到您想要换出的元素上，这应该留下1与交换。< / p>

然后你只存储TR的html（）和两个元素的ID，这样你就可以把它们交换出来。

实时预览:: http://jsfiddle.net/MrMarlow/zLz929xy/7/

相关问题
最新问题