Question

代码基本上编辑表格单元格。我想使用not（）方法，以便每当我在创建的临时输入外部单击时，我将其替换为表格单元格。我想代码在一个块中运行并且没有检测到id为“replace”的任何输入，那么我该如何解决呢？此外，我想存储触发第一个事件（dblclick）的元素（th或td），以便我可以使用它来替换正确类型的单元格的输入，但它似乎只存储首先触发事件的元素和我真的不明白为什么。

完整代码here

$(function () {
  $(document).on("dblclick", "th, td", function (event) {
    var cellText = $(this).text();
    $(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
    var $typeCell = $(event.currentTarget);      // Store element which trigger the event     
    $("body").not("#replace").on("click", function () {       // .not() method
      cellText = $("#replace").val();
      if ($typeCell.is("th")) {
        $("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
      }
      else {
        $("#replace").replaceWith("<td>" + cellText + "</td>");
      }
    });
  });
});

Answer 1

我修改了HTML和JavaScript以避免任何可能的错误。正确的做法是将th中的所有thead和td中的所有tbody包裹起来。

$(document).on("dblclick", "th, td", function(event) {
  var cellText = $(this).text();
  $(this).replaceWith("<input type='text' id='replace' value='" + cellText + "'>");
});

$("body").on("click", function() {
  if (event.target.id != 'replace' && $('#replace').length != 0) {
    var cellText = $("#replace").val();
    if ($('#replace').parents().is('thead'))
      $("#replace").replaceWith("<th scope='col'>" + cellText + "</th>");
    else
      $("#replace").replaceWith("<td>" + cellText + "</td>");
  }
});

table {
  border-collapse: collapse;
  margin: 20px;
  min-width: 100px;
}

table,
th,
td {
  border: 1px solid grey;
  padding: 4px;
}

th {
  background: springgreen;
}

tr:nth-child(odd) {
  background: rgba(0, 255, 127, 0.3);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <table>
    <thead>
      <tr>
        <th scope="col">Uno</th>
        <th scope="col">Dos</th>
        <th scope="col">Tres</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>Data1</td>
        <td>Data2</td>
        <td>Data3</td>
      </tr>
      <tr>
        <td>Data4</td>
        <td>Data5</td>
        <td>Data6</td>
      </tr>
    </tbody>
  </table>
</div>

使用not（selector）动态创建元素

1 个答案: