Попытка переместить данные ячейки из одной колонки в другую

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

Вы можете поменять содержание в соответствии с текущей разметкой следующим образом:

$(".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

Answer 2

Я не тихий уверен, получил ли я свой вопрос правильно, но вы можете попробовать это так:

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

});

Рабочая Fiddle: JSFiddle