Table中选定行后插入新的行

首先如下为简要的table结果 内包含一个添加按钮 事件为ruleAdd(this)

<table class="ui-table" id="list">
<tbody>
<tr class="rule">
<td><input type="button" class="ui-button ui-button-morange" value="添加" onclick="ruleAdd(this)" />
</td>
</tr>
</tbody>
</table>

方法具体实现如下

    var ruleAdd = function(target) {
                $(target.parentElement.parentElement)
                        .after('<tr class="rule"></tr>');
         }

首先通过传入的空间的parentElement的方式获取到当前行，然后在后面添加新的一行

尝试过程中，使用了append，appendTo方法，均不行，因为append和appendTo是在元素内部添加，而不是在元素的后面添加，所以使用append会导致当前行的右侧拉伸并出现空白行，而预期是在当前行的下面。而使用after则没有这个问题，相对应的还有before方法。