Question

我正在创建一个两行的表，每行分别由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>

Answer 1

我试图弄清楚您需要什么，如果我是对的，您想在具有相同索引的2行之间交换内容的td，但是它应该交换从零索引开始直到2行之间的选定td索引的所有tds。

如果我的上述说法正确，则必须要求在两行中选择相同的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>

Answer 2

以下演示将与.selected单元格的对应部分交换（从任一行-双向）。演示中将对详细信息进行评论。

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

好像您要在不先保存原始值的情况下将一个元素的值分配给另一个元素。因此，它们都以秒的值结束。

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

3 个答案: