試圖從一列移動單元格數據到另一個

我在JavaScript的初學者，我花了5小時，試圖使箭頭文本從列移動到另一個像這樣 enter image description here 試圖從一列移動單元格數據到另一個

可惜我沒能做到這一點的自己！我的嘗試是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")); 
});

誰能幫助我在這個問題？

來源

2014-09-01 dotfreelancer

你的目標是不明確的，請詳細說明這一點 – Saksham 2014-09-01 15:40:53

@Saksham我需要將文本從第二列移動到下一個使用箭頭圖像的虎鉗詩句 – dotfreelancer 2014-09-01 15:42:42

這是靜態的嗎？你如何區分右/左箭頭？ – 2014-09-01 15:52:30

您可以根據您當前的標記交換的內容如下：

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

來源

2014-09-01 16:50:29

我希望如果我可以選擇你的答案也是正確的答案，謝謝 – dotfreelancer 2014-09-01 16:56:55

以及其他答案顯然不是*問題的答案*因爲它只能用於單行，這是爲什麼我打擾發帖:) – 2014-09-01 17:01:02

你是對的..謝謝 – dotfreelancer 2014-09-03 09:34:49

我安靜不知道是否有你的問題的權利，但你可以嘗試這樣的：

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

來源

2014-09-01 15:58:45 Robin

回答

相關問題