Question

我有一些PHP代码在页面上创建下表，如下所示：

echo '<table class="table" id="structures' . $i . '">';
    echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td></tr>';
    echo '<tr>';
        if($draw_hyp == 1){
            echo '<td class="s_td"><input class="s_input" type="text" class="structure" placeholder="problem statement" name="hyp" id="hypo" /></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td>';   
        }else{
            echo '<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td>';
        }
    echo '</tr>';
    echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' . $i . '[]"></td></tr>';
    echo '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' . $i . '">Add</a></td></tr>';
echo '</table>';

然后我有一些允许用户在表中添加其他行的js，如下所示：

$( "body" ).on( "click", ".add_sub_bucket", function(e) {
    e.preventDefault();
    var currentId = $(this).attr('id');
    $('#structures' + currentId).append('<tr><td class="s_td"></td>' + 
    '<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' + currentId + '[]"></td></tr>' + 
    /*'<a href="#" class="remove_sub_bucket">x</a></td></tr>' + */
    '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' + currentId + '">Add</a></td></tr>'
    );
    $(this).remove();
});

js成功添加了行，但添加的每一行似乎都有两倍的空间。来自最初PHP和js的HTML引用相同的.css文件，所以我有点疑惑为什么我从js获得行之间的额外间距。

这里是由PHP代码创建的表格的HTML：

<form role="form" method="POST" id="inputStructure"> 
    <table class="table" id="structures0">
        <tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
        <tr><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Bucket" name="b[]"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
        <tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb0[]"></td></tr>
        <tr><td class="s_td"></td><td class="s_td"><a href="#" class="add_bucket" id="0">Add</a></td><td class="s_td"><a href="#" class="add_sub_bucket" id="0">Add</a></td></tr>
    </table>

非常感谢任何正确方向的指针！

Answer 1

在fiddle中，您删除了“添加”链接，而不是包含该链接的行，因此您检索一个空行，即您的“双重”空间。如果你给桌子边框，最好看。

$( "body" ).on( "click", ".add_sub_bucket", function(e) {
    e.preventDefault();
    var currentId = $(this).attr('id');
    $('#structures' + currentId).append('<tr><td class="s_td"></td>' + 
    '<td class="s_td"></td><td class="s_td"><input class="s_input" type="text" placeholder="Sub-bucket" name="sb' + currentId + '[]"></td></tr>' + 
    /*'<a href="#" class="remove_sub_bucket">x</a></td></tr>' + */
    '<tr><td class="s_td"></td><td class="s_td"></td><td class="s_td"><a href="#" class="add_sub_bucket" id="' + currentId + '">Add</a></td></tr>'
    );
   // this is the link not the row, you could do the following instead 
   // $(this).remove();
   $(this).closest('tr').remove();
});

使用jquery追加表行时导致显示额外间距的原因

1 个答案: