试图从一列移动单元格数据到另一个

我在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

回答

相关问题