0

问题

我想在给定的匹配集之后的表中添加一个新的 TR，或者如果匹配集为空，则在表的末尾添加一个新的 TR。给定以下html：

<table id="blax">
   <thead>
   </thead>
   <tbody>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="alpha">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- new "alpha" tr to go here-->
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <tr class="beta">
         <td>some stuff</td>
         <td>more stuff</td>
      </tr>
      <!-- but new "gamma" tr to go at end-->
   </tbody>'
</table>

我知道如何在一些匹配的集合之后添加一个新的 tr，例如：

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .insertAfter(b.find('tr.alpha:last'));

但是，如果为类运行相同的代码gamma（表中尚不存在）怎么办？然后使用与用于 alpha 插入相同的代码使新元素的插入点<tr class="gamma"></tr>位于表末尾的简单方法是什么？

function insertAtPosition(parentElement, afterElement, newElement) {
   // some code here that does the job for either "alpha" or "gamma"
}

function creatElement(className) {
   insertAtPosition(
      b,
      b.find('tr.' + className + ':last'),
      $('<tr class="' + className + '"></tr>'
   );
}

createElement('alpha');
createElement('gamma');

我需要帮助填写“这里的一些代码”块。

现在闲聊

顺便说一句，是否insertAfter返回插入的元素或它之后添加的项目？我猜这会after返回插入的项目并insertAfter返回它所附加的项目，就像方式append和appendTo工作一样，是吗？jQuery 文档很好，但有一些大漏洞，例如没有列出每个函数返回的内容（我很困惑为什么有人会错过这个）。事实上，当我写这个问题时，我需要真正集中注意力才能确保我做对了。

只是懒散地想，如果append并appendTo支持一个可选参数，它是索引位置或直接子元素（或一组直接子元素），在所有这些元素将被附加之后，这将是很好的。在索引的情况下，它可以是所需的位置，也可以是插入项目的位置，因此 0 或 -1 意味着作为第一个孩子。

var b = $('#blax tbody');
var newAlphaTr = $('<tr class="alpha"></tr>')
   .appendTo(b, $('tr.alpha', b));
// or perhaps a selector
var newAlphaTr2 = $('<tr class="alpha"></tr>')
  .appendTo(b, 'tr.alpha:last');

alpha这将在指定的子集之后插入一个带有类的新 tr 。我可以添加:last到选择器，但这样会很好。如果匹配的 'td.alpha' 集是空的，那么它会像 append 一样正常执行并将其放在现有子代之后。

4

2 回答 2

0 
<tbody id='zeta'/>

$('#zeta').append('<tr class="alpha"></tr>');

你愿意把它当作 if/else 吗？

if( $('.alpha').length>0){
//附加到类
}else{
//附加到 tbody
}

于 2010-10-26T21:06:18.533 回答
0

自从提出这个问题以来，我拥有近 2 年的 jQuery 经验，我现在可以看到答案很简单：

var b = $('#blax tbody'),
   newAlphaTr = $('<tr class="alpha"></tr>')
      .insertAfter(
         b.find('tr.alpha:last, tr:last')
            .first()
      );

而不是只匹配tr所需的类，也匹配最后一个tr而不考虑类。然后，用 抓住第一个first()，这将是我们要插入的那个。问题解决了。

于 2012-08-03T20:26:03.117 回答