我正在尝试将两个按钮放置在当前活动表行的TD下面。我希望他们看起来像这样：

我尝试了几十种方法，但没有一种能达到预期的效果：要么按钮根本不出现，要么它们出现在**当前活动的TD之后，或所有表行之后。
我发现的唯一有效的方法是这样的：

$(this).next().prepend(buttons);

但结果并不特别美观：

完全相同的结果是实现与：

$(this).next().append(buttons);

如果我用

$(this).append(buttons);

按钮被插入到我正在编辑的单元格中，它们的HTML也被保存，所以这不起作用。
我甚至尝试在下一个表格行（<td class="controls"></td>）中创建一个特殊的空TD，以便在其中插入按钮，但我找不到针对该特定单元格的正确代码，而没有针对其他单元格的代码。然而，这种方法并不是最好的，因为按钮将同时出现在源单元格和目标单元格的下一行的第一个单元格中。我的最终目标是完成第一个屏幕截图上显示的内容：这些按钮应该出现在当前活动单元格的正下方。
以下是我尝试过的一些jQuery方法：

$(this).next('td.controls').append(buttons); /* nothing is displayed */
$(this).next('tr td.controls').append(buttons); /* nothing is displayed */
$(this).parent().append(buttons); /* the buttons appear after and outide the table */
$(this).parent().prepend(buttons); /* the buttons appear before the first cell on the active row */
$(this).parent().next().prepend(buttons); /* the buttons are inserted inside the `td.controls` cell but for both the source and the target */

这里有一个小提琴：https://jsfiddle.net/cheeseus/cf5qkba7/4/
我希望我已经提供了所有相关的细节和代码。如果没有，请告诉我。

使用jQuery find方法。
给定一个表示一组DOM元素的jQuery对象，.find（）方法允许我们在DOM树中搜索这些元素的后代，并从匹配的元素构造一个新的jQuery对象。

$(this).parent().next().find("td:eq(" + $(this).index() + ").read-only").prepend(buttons); /* display the Save and Cancel buttons */

上面的js代码将在.read-only类的当前索引中找到下一个td，并在它之前插入按钮。
我还添加了以下CSS来正确定位单行按钮：

.edit-controls {
  display: flex;
  flex-direction: row;
}

查看以下示例：

$('.editor').dblclick(function() {

  active = $(this); /* assign current segment to a variable */

  buttons = '<div class="edit-controls" contenteditable="false"><button class="edit-ok btn btn-sm btn-success">SAVE</button> <button class="edit-cancel btn btn-sm btn-danger">CANCEL</button></div>';

  $('.edit-controls').remove(); /* remove the Save and Cancel buttons if already displayed in other cells */
  $('.editor').prop('contenteditable', 'false'); /* make any active editable cells inactive */
  $('.editor').removeClass('border border-success'); /* remove green border around cell that indicates active editable state */
  $(this).prop('contenteditable', 'true'); /* make the clicked cell active editable */
  $(this).addClass('border border-success'); /* display green border around active editable cell */

  $(this).parent().next().find("td:eq(" + $(this).index() + ").read-only").prepend(buttons); /* display the Save and Cancel buttons */

  originalContent = $(this).html(); /* store original content to use if user clicks Cancel */

  $('.edit-cancel').click(function() {
    active.html(originalContent); /* restore original content */
    active.prop('contenteditable', 'false'); /* remove editable state */
    active.removeClass('border border-success'); /* remove editable border */
    $('.edit-controls').remove(); /* remove the Save and Cancel buttons */
  });

});

.edit-controls {
  display: flex;
  flex-direction: row;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<div class="col-lg-11 col-sm-12 ms-lg-3 ms-sm-1 mt-4 table-responsive">
  <table class="table table-sm table-striped table-hover caption-top editable" id="editable">
    <thead class="table-dark">
      <tr>
        <th>ID</th>
        <th>Source</th>
        <th>Target</th>
        <th><i class="bi bi-braces-asterisk"></i></th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>1</td>
        <td class="editor" data-segmentID="1" data-fileName="sample_tmx.tmx" data-id="sourceText[1]">&lt;bpt x=&quot;1&quot; i=&quot;1&quot; type=&quot;italic&quot;/&gt;Формантът -лар/-лар- (от тюрк. -lar) е слабо представен в българската словообразувателна система.&lt;ept i=&quot;1&quot;/&gt;</td>
        <td class="editor" data-segmentID="1" data-fileName="sample_tmx.tmx" data-id="targetText[1]">&lt;bpt x=&quot;1&quot; i=&quot;1&quot; type=&quot;italic&quot;/&gt;The -lar/-lar- formant (from the Turkic -lar) is sparsely represented in the Bulgarian word-building system.&lt;ept i=&quot;1&quot;/&gt;</td>
        <td class="read-only"></td>
      </tr>
      <tr class="table-secondary small">
        <td class="controls"></td>
        <td class="read-only">Created: 2020-11-01 @ 13:37:34 by Cheeseus</td>
        <td class="read-only">Modified: by TMX Editor</td>
        <td class="read-only" id="status-report-1"></td>
      </tr>
      <tr>
        <td>2</td>
        <td class="editor" data-segmentID="2" data-fileName="sample_tmx.tmx" data-id="sourceText[2]">ПАРТНЬОРИ</td>
        <td class="editor" data-segmentID="2" data-fileName="sample_tmx.tmx" data-id="targetText[2]">PARTNERS</td>
        <td class="read-only"></td>
      </tr>
      <tr class="table-secondary small">
        <td class="controls"></td>
        <td class="read-only">Created: 2008-08-12 @ 11:12:21 by Cheeseus</td>
        <td class="read-only">Modified: by Cheeseus</td>
        <td class="read-only" id="status-report-2"></td>
      </tr>
    </tbody>
  </table>
</div>

Jquery：将按钮置于当前表行之下

1条答案

查看以下示例：

相关问题

热门标签

最新问答