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

【问题标题】：Swap table cells between rows based on clicking position根据单击位置在行之间交换表格单元格
【发布时间】：2019-02-10 03:57:16
【问题描述】：

我正在创建一个包含两行的表，每行由 0 和 1 组成。我创建了一个函数，允许用户单击两个表格单元格和一个交换两个选定表格单元格的按钮。

我希望能够将 td 元素从行的位置 0 交换到选定的表格单元格，并且第二行也是如此，以便在两行之间交换多个表格单元格。

例如，如果我在两行中选择第六个表格单元格，它应该将所有表格单元格从行的开头交换到第六个表格单元格

我在下面介绍了使用 jQuery 的代码。任何帮助将不胜感激：

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

【问题讨论】：

标签： javascript jquery html html-table

【解决方案1】：

我试图弄清楚你需要什么，如果我是正确的，你想用相同索引的 2 行之间的内容交换 td，但它应该交换从零索引开始到 2 行中选定的 td 索引的所有 td。

如果我上面的说法是正确的，你必须要求在两行中选择相同的td索引，否则不均匀的索引选择会产生异常。

在此处查看我的完整工作代码：
https://github.com/helloritesh000/swap-table-cells-between-rows-based-on-clicking-position

如有需要，请发表评论。

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

【讨论】：

【解决方案2】：

下面的演示将与.selected 单元格的对应部分交换（从任一行——双向）。详情在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>

【讨论】：

【解决方案3】：

看起来您是在没有先保存原始值的情况下将一个元素的值分配给另一个元素。所以它们都以第二个的值结束。

【讨论】：