根据点击位置在行之间交换表格单元格

Question

I am creating a table of two rows which each consist of 0s and 1s. 我正在创建一个包含两行的表，每行由0和1组成。 I have created a function which allows the user to click onto two table cells and a button which swaps the two selected table cells. 我创建了一个函数，该函数允许用户单击两个表单元格，并单击一个按钮来交换两个选定的表单元格。

I want to be able to swap the td elements from position 0 of a row to the table cell that is selected, and the same for the second row so that multiple table cells are swapped between two rows. 我希望能够将td元素从行的位置0交换到选定的表单元格，第二行的交换条件相同，以便多个表单元格在两行之间交换。

for example, if I select the sixth table cell in both rows, it should swap all the table cells from the beginning of the row to the sixth table cell 例如，如果我在两行中都选择了第六个表格单元格，则应该将所有行从表格的开头换到第六个表格单元格

I have featured below the code which uses jQuery. 我在下面介绍了使用jQuery的代码。 Any help will be greatly appreciated: 任何帮助将不胜感激：

<html>
<style>

body{
font-size: 30px;
text-align: center;
background-color: ivory;
}
table{
width:100px;

}
h1{
font-family: Helvetica;
font-size: 30px;
}
th{
border: 10px solid black;
padding: 5px;
font-size: 70px;
}
td{
border: 10px solid black;
padding: 5px;
font-size: 130px;

}

tr.center, td.center{
text-align: center;
}
td:not(.notSelectable) {
cursor: pointer
}

td.selected,
td.lastSelected {
background-color: yellow;
color: white;
}
</style>

<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
$("table td:not(.notSelectable)").click(function() {
$(".lastSelected").removeClass("lastSelected");
$(".selected").toggleClass("selected lastSelected");
$(this).addClass("selected");
});
});

function swap() {

if ($(".selected, .lastSelected").length != 2) { return;  }


$("#lblSelectedDate").text($(".selected").siblings(".date").text());
    $("#lblLastSelectedDate").text($(".lastSelected").siblings(".date").text());

  // Set label with value data

   $("#lblSelectedValue").text($(".selected").children("input[type=hidden]").val());
       $("#lblLastSelectedValue").text($(".lastSelected").children("input[type=hidden]").val());

// Swap cell data
var temp = $(".lastSelected").html();
$(".lastSelected").html($(".selected").html());
$(".selected").html(temp);
$(".selected, .lastSelected").removeClass();
}
</script>

<body>
<button onclick="swap();">Crossover</button>
<br /><br />


<table border="1" align = "center">

<tbody>
<tr>

  <td bgcolor = "#4caf50">0<input type="hidden" value="0" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <td bgcolor = "#4caf50">0<input type="hidden" value="0" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <td bgcolor = "#4caf50">0<input type="hidden" value="0" /></td>
  <td bgcolor = "#4caf50">0<input type="hidden" value="0" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <td bgcolor = "#4caf50">1<input type="hidden" value="1" /></td>
  <th>P1</th>

</tr>
<tr>

  <td bgcolor ="#ff0000">0<input type="hidden" value="0" /></td>
  <td bgcolor= "#ff0000">0<input type="hidden" value="0" /></td>
  <td bgcolor= "#ff0000">0<input type="hidden" value="0" /></td>
  <td bgcolor= "#ff0000">1<input type="hidden" value="1" /></td>
  <td bgcolor ="#ff0000">1<input type="hidden" value="1" /></td>
  <td bgcolor ="#ff0000">1<input type="hidden" value="1" /></td>
  <td bgcolor= "#ff0000">0<input type="hidden" value="0" /></td>
  <td bgcolor ="#ff0000">1<input type="hidden" value="1" /></td>
  <td bgcolor= "#ff0000">1<input type="hidden" value="1" /></td>
  <td bgcolor= "#ff0000">0<input type="hidden" value="0" /></td>
  <th>P2</th>
</tr>

</tbody>
</table>

</body>
</html>

Answer 1

I tried to figure out what you need, If I am correct you want to swap td with content between 2 rows with same index, but it should swap all the tds starting from zero index till the selected td index among 2 rows. 我试图弄清楚您需要什么，如果我是对的，您想在具有相同索引的2行之间交换内容的td，但是它应该交换从零索引开始直到2行之间的选定td索引的所有tds。

If my above statement is correct, you must have requirement to select same td index in both rows, other wise uneven index selection will generate abnormality. 如果我的上述说法是正确的，则必须要求在两行中选择相同的td索引，否则明智的不均匀索引选择将产生异常。

Check my complete working code here: 在这里检查我完整的工作代码：
https://github.com/helloritesh000/swap-table-cells-between-rows-based-on-clicking-position https://github.com/helloritesh000/swap-table-cells-between-rows-based-on-clicking-position

Comment if required. 如果需要，请发表评论。

<pre>
    <script>
$(function() {
    $("table td:not(.notSelectable)").click(function() {
        var otherTrIndex = ($(this).closest('tr').index() == 1) ? 0 : 1;
        if($(this).closest('tr').find('td.selected').length >= 1 
        || $(this).closest('tr').find('td.lastSelected').length >= 1 
        || ($('td.selected').length > 0 
            && $($('table').find('tr')[otherTrIndex]).find('td.selected').length != ($(this).index() + 1)
                )
        )
        {
            return false;
        }
        $(".lastSelected").removeClass("lastSelected");
        $(".selected").toggleClass("selected lastSelected");
        for(i = 0; i <= $(this).index(); i++)
        {
            $($(this).closest('tr').find('td')[i]).addClass("selected");
        }
    });
});

function swap() {
    var selectedTd = $('td.selected');
    var lastSelectedTd = $('td.lastSelected');
    for(i = 0; i < selectedTd.length; i++)
    {
        var selectedTdHtml = selectedTd[i].outerHTML;
        selectedTd[i].outerHTML = lastSelectedTd[i].outerHTML;
        lastSelectedTd[i].outerHTML = selectedTdHtml;
    }

    $(".selected, .lastSelected").removeClass();
}
</script>

</pre>

Answer 2

The following demo will swap with the counterpart of the .selected cell (from either row -- bidirectionally). 以下演示将与.selected单元格的对应部分交换（从任一行-双向）。 Details are commented in demo. 演示中将评论详细信息。

 // Counter let id = 0; // Click on any cell... $('table td').on('click', function() { // Increment counter let idx = id++; // Get index of clicked cell let i = $(this).index(); /* Add/remove .selected to/from clicked cell and... ...add data-id attribute to it with the value of counter */ $(this).toggleClass('selected').data('id', idx); // Find the clicked cell's counterpart let otherCell = $(this).closest('tr').siblings('tr').find('td').eq(i); // Give it the class .marked+counter otherCell.addClass(`marked${idx}`); }); // When button is clicked... $('button').on('click', function() { // On each .selected cell... $('.selected').each(function() { // Get .selected data-id let idx = $(this).data('id'); // Find its counterpart let otherCell = $(`.marked${idx}`); // Get the value of .selected's hidden input let zer00ne = $(this).find(':hidden').val(); // Get the value of counterpart's hidden value let other01 = otherCell.find(':hidden').val(); // Replace the contents with one another $(this).html(`${other01}<input type="hidden" value="${other01}">`); otherCell.html(`${zer00ne}<input type="hidden" value="${zer00ne}">`); }); // Cleanup all of the cells $('td').each(function() { this.className = ''; $('.selected').removeData(); }); });

 body { font-size: 30px; text-align: center; background-color: ivory; } table { width: 100px; } h1 { font-family: Helvetica; font-size: 30px; } th { border: 10px solid black; padding: 5px; font-size: 70px; } td { border: 10px solid black; padding: 5px; font-size: 130px; } tr.center, td.center { text-align: center; } td:not(.notSelectable) { cursor: pointer } td.selected, td.lastSelected { background-color: gold; color: black; } td[class^=marked] { background-color: black; color: gold; }

 <button>Crossover</button> <br /><br /> <table border="1" align="center"> <tbody> <tr> <td bgcolor="#4caf50">0<input type="hidden" value="0" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <td bgcolor="#4caf50">0<input type="hidden" value="0" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <td bgcolor="#4caf50">0<input type="hidden" value="0" /></td> <td bgcolor="#4caf50">0<input type="hidden" value="0" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <td bgcolor="#4caf50">1<input type="hidden" value="1" /></td> <th>P1</th> </tr> <tr> <td bgcolor="#ff0000">0<input type="hidden" value="0" /></td> <td bgcolor="#ff0000">0<input type="hidden" value="0" /></td> <td bgcolor="#ff0000">0<input type="hidden" value="0" /></td> <td bgcolor="#ff0000">1<input type="hidden" value="1" /></td> <td bgcolor="#ff0000">1<input type="hidden" value="1" /></td> <td bgcolor="#ff0000">1<input type="hidden" value="1" /></td> <td bgcolor="#ff0000">0<input type="hidden" value="0" /></td> <td bgcolor="#ff0000">1<input type="hidden" value="1" /></td> <td bgcolor="#ff0000">1<input type="hidden" value="1" /></td> <td bgcolor="#ff0000">0<input type="hidden" value="0" /></td> <th>P2</th> </tr> </tbody> </table> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Answer 3

Looks like you're assigning the value of one element to the other without first saving the original value. 好像您是在不先保存原始值的情况下将一个元素的值分配给另一个元素。 So both of them end up with the value of the second. 因此，它们都以秒的值结尾。

根据点击位置在行之间交换表格单元格

问题描述

3 个解决方案

解决方案1
2 已采纳 2019-02-09 19:57:16

解决方案2
1 2019-02-09 18:04:22

解决方案3
0 2019-02-09 15:05:22

根据点击位置在行之间交换表格单元格

问题描述

3 个解决方案

解决方案1 2 已采纳 2019-02-09 19:57:16

解决方案2 1 2019-02-09 18:04:22

解决方案3 0 2019-02-09 15:05:22

解决方案1
2 已采纳 2019-02-09 19:57:16

解决方案2
1 2019-02-09 18:04:22

解决方案3
0 2019-02-09 15:05:22