尝试将单元格数据从一列移动到另一列

Question

我是JavaScript的初学者，我花了5个小时尝试制作箭头，将文字从列移动到另一个，如

遗憾的是，我没有自己做到这一点！我的尝试是here (jsfiddle)这是JS代码：

$(function () {
    $(".table tr > td.right > span").each(function() {
        $(this).append("<span class='left_arrow'></span>")
    });

    $(".table tr > td.left > span").each(function () {
        $(this).append("<span class='right_arrow'></span>")
    });
});

$(".table tr > td > span >span").on('click', 'span', function () {
    var selected = $(this).parent().text();
    selected.remove().appendTo(selected.parent().siblings("right"));
});

任何人都可以帮我解决这个问题吗？

Answer 1

我不确定我的问题是否正确，但你可以这样试试：

HTML：

<table>
<tr>
    <td><input id="cellLeft" type="text" value="This is the content."></td>
    <td><img id="changeContent" src="http://cdn.flaticon.com/png/256/50849.png"></td>
    <td><input id="cellRight" type="text" value=""></td>        
</tr>

JS：

$(document).ready(function () {
// When the arrow is clicked, trigger the function
$('#changeContent').click(function () {
    // Save the content of both fields in variables
    var contentLeft = $('#cellLeft').val();
    var contentRight = $('#cellRight').val();
    // Write the contents back into the fields but sides changed
    $('#cellLeft').val(contentRight);
    $('#cellRight').val(contentLeft);
});

}）;

工作小提琴：JSFiddle

Answer 2

您可以根据当前标记交换内容，如下所示：

$(".table tr > td > img").on('click', function () {
  var $siblings = $(this).parent().siblings();
  var contents = $siblings.map(function(){
    return $(this).html();
  });
  $siblings.each(function(i){
    $(this).html((i==0) ? contents[1] : contents[0])
  })
});

Updated Fiddle