如何使用ajax交换两个表格单元格值并更新到数据库中

Question

javascript代码

$("#table td").click(function () {

    $(this).addClass('selected').siblings().removeClass('selected');
    var value = $(this).find('td').html();
   // alert(value);
});

$('.swapbutton').on('click', function (e) {
    alert($("#table td.selected td:first").html());
});

css

  td {
    border: 1px #DDD solid;
    padding: 5px;
    cursor: pointer;
   }

   .selected {
    background-color: brown;
    color: #FFF;
   }

请参见上图

• 我想要交换两个表格单元格值

• 点击交换按钮并交换

，我希望获得所选两个单元格的值

如何使用JavaScript或Jquery也可以更新到数据库

Answer 1

这是一个简单的解决方案，我认为你应该去做什么：

如果您需要更多限制它的工作原理让我知道，我很乐意调整。但这应该是一个很好的起点。

$(function() {
  $("table td:not(.notSelectable)").click(function() {
    $(".lastSelected").removeClass("lastSelected");
    $(".selected").toggleClass("selected lastSelected");
    $(this).addClass("selected");
  });
});

function swap() {
  // We cannot swap if there are not 2 selected items
  if ($(".selected, .lastSelected").length != 2) { return; }

  // Set label with date data
  $("#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();
}

td:not(.notSelectable) {
  cursor: pointer
}

td.selected,
td.lastSelected {
  background-color: maroon;
  color: white;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<button onclick="swap();">Swap</button>
<br /><br />
Selected Date: <span id="lblSelectedDate"></span>
<br /> Selected Value: <span id="lblSelectedValue"></span>
<br /> Last Selected Date: <span id="lblLastSelectedDate"></span>
<br /> Last Selected Value: <span id="lblLastSelectedValue"></span>
<br /><br />

<table border="solid">
  <thead>
    <th>Date</th><th>First</th><th>Second</th><th>Third</th>
  </thead>
  <tbody>
    <tr>
      <td class="notSelectable date">01/01/2018 10:00 pm</td>
      <td>00<input type="hidden" value="00" /></td>
      <td>01<input type="hidden" value="01" /></td>
      <td>02<input type="hidden" value="02" /></td>
    </tr>
    <tr>
      <td class="notSelectable date">01/01/2018 11:00 pm</td>
      <td>10<input type="hidden" value="10" /></td>
      <td>11<input type="hidden" value="11" /></td>
      <td>12<input type="hidden" value="12" /></td>
    </tr>
    <tr>
      <td class="notSelectable date">01/01/2018 12:00 pm</td>
      <td>20<input type="hidden" value="20" /></td>
      <td>21<input type="hidden" value="21" /></td>
      <td>22<input type="hidden" value="22" /></td>
    </tr>
  </tbody>
</table>

Answer 2

var value = [];
var tdObj = [];
$("#table td").click(function () {
    $(this).addClass('selected').siblings().removeClass('selected');
    for(var i=0; i<2;i++) {
        tdObj[i] = $(this).find('td');
        value[i] = tdObj.text();
        if(i>1) return false;
    }
    // alert(value);
});

$('.swapbutton').on('click', function (e) {
    for(var i=2; i>0;i--) {
        value[i] = tdObj[i].text();
    }
});