Question

我是jQuery的新手，希望有人可以帮助我。

我有一个包含动态添加行的大型HTML表。

该表具有标准结构（包括thead，tbody和tfoot）。

在此表中有可编辑的TD（具有类“editable”并包含一个可信的div）和不可编辑的TD（其中没有类“可编辑”且不包含div ）。

如果用户处于这样一个div中，我想检查当前（最近）的TD 是同一行中具有某个类的最后一个TD （ “editable”）。

我尝试了以下但这在这里不起作用。有人能告诉我我做错了吗？

我的jQuery（已准备就绪）：

$(document).keydown(function(e){
    var current = $(e.target);
    // ...
    if($(current).closest('td').is('td.editable:last')){
        alert('last editable td in current row'); // test alert
    }
    // ...
});

我的HTML（示例行）：

<tr>
    <!-- ... -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <td></td> <!-- non-editable -->
    <td></td> <!-- non-editable -->
    <td class="editable"><div contenteditable="true"></div></td> <!-- editable -->
    <!-- ... -->
</tr>

Answer 1

试试:last-of-type选择器？切勿使用:last或:first，因为它们在每个浏览器中的实现方式都不同！

if ($(current).closest('td').is('td.editable:last-of-type')) {

Answer 2

使用jQuery index()之类的

$('div').click(function() {
    var editables = $(this).closest('tr').find('td.editable')
    var count = editables.length;
    if(editables.index($(this).closest('td')) == (count - 1))...
});

如果closest('td')没有类editable

，则上述情况不应返回索引

$('div').click(function() {
  var editables = $(this).closest('tr').find('td.editable')
  var count = editables.length;
  console.log('Is last editable td: ' + (editables.index($(this).closest('td')) == (count - 1)));
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table>
  <tr>
    <!-- ... -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- non-editable -->
    <td class="editable">
      <div contenteditable="true">test</div>
    </td>
    <!-- editable -->
    <td>
      <div contenteditable="true">not editable</div>
    </td>
    <!-- ... -->
  </tr>
</table>

Answer 3

Fiddle

<table>
    <tr>
        <td class="editable"><div contenteditable="true">11</div></td> 
        <td class="editable"><div contenteditable="true">22</div></td>
        <td>33</td> 
        <td>44</td> 
        <td class="editable"><div contenteditable="true">55</div></td> 
    </tr>
</table>

 $("table tr td.editable").keydown(function(){   
    var col = $(this).parent().children().index($(this));
    if(col == $(this).parent().children().size() - 1){
        alert('last editable td in current row'); // test alert
    }    
});

Answer 4

嘿，你可以试试这个：TextureScale

基本上我所做的是我将表标记作为目标，并使用伪类最后类型查看它的后代。

希望这会有所帮助。 Cheer.s

$('table tr:last-of-type').css({backgroundColor: "pink"})

如何检查TD是否排在行

4 个答案: