Question

我有一张这样的表

<table>
  <tr>
    <td>
      <img>
      <div></div>
    </td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td></td>
    <td></td>
    <td></td>
  </tr>
  <tr>
    <td>
      <img>
      <div></div>
    </td>
    <td></td>
    <td></td>
  </tr>
</table>

当我点击图像时，我需要找到包含图像的td的下一行，并在它之前添加另一行。我试过这个，但它没有用

$(this)
  .closest("tr")
  .next("tr:has(td:has(img))")
  .before("<tr><td style='border-right: hidden'></td><td colspan='999'>" + $(this).next().html() + "</td></tr>");

有人可以帮助我吗？

Answer 1

您可以在TR内获取图像的当前索引。我建议使用类，但如果这是你需要的话就足够了。我添加了一个alt文本和边框，只是为了看看发生了什么

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>    
<table border=1>
      <tr>
        <td><img alt="sample"><div></div></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td><img alt="sample"><div></div></td>
        <td></td>
        <td></td>
      </tr>
    </table>

对于JS代码，我使用了委托，以防万一需要点击添加的图像。在这里，我获取当前索引，然后检查是否有下一个项目，然后将其递增到下一个项目。

$("table").on('click','img',function(){
  //get current index
  var index = $("tr img").index(this);

  //get total item count 
  var count = $("tr img").length;
  //check if has next tr with img
  if (index < (count - 1)){
    index++;
    //we need to get the next tr with image then move element up to parent tr to insert row before it
    $("tr img:eq("+ index + ")").closest('tr').before('<tr><td><img alt="sample_new"><div></div></td> <td></td><td></td></tr>');
  }
});

运行此操作时，您会看到在带有图像的下一行之前添加了一个新行。您可以找到工作代码answer

为了提高效率，您可能希望使用here复制隐藏的空白行，以便更容易编辑。

Answer 2

您的逻辑几乎是正确的，您只需要使用nextAll()作为您正在寻找的元素不是下一个兄弟。如果您只想查找下一个实例，您还需要使用:first。最后，tr:has(img)就是找到行所需的全部内容，而且td:has()也不需要$('img').click(function() { $(this).closest("tr").nextAll("tr:has(img):first").before('<tr><td style="border-right:hidden"></td><td colspan="999">' + $(this).next().html() + '</td></tr>') });。试试这个：

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <img src="foo.jpg">
      <div>div 1</div>
    </td>
    <td>1</td>
    <td>2</td>
  </tr>
  <tr>
    <td>3</td>
    <td>4</td>
    <td>5</td>
  </tr>
  <tr>
    <td>
      <img src="foo.jpg">
      <div>div 2</div>
    </td>
    <td>6</td>
    <td>7</td>
  </tr>
</table>

＆＃13;

NSDateFormatter *dateFormat = [NSDateFormatter new];
[dateFormat setDateFormat:@"EEEE dd/MM/yyyy HH:mm"];
dateFormat.locale = [NSLocale localeWithLocaleIdentifier:@"en_AU"];
NSDate *startDate = [dateFormat dateFromString:startString];
NSDate *endDate = [dateFormat dateFromString:endString];

＆＃13;

找到包含图像的下一个td

2 个答案: