Question

我有一个包含大量订购详细信息的表，但是，当我想从管理页面添加产品时，即使所有原始表结构都正常工作，一旦jQuery回应额外的DIV给出我更多的表，任何人都可以在jquery中推荐一种方法，只需在现有表中添加几行...

<?php echo('
<tr>
        <th colspan="2"><label>Item '.$mCount.'</label></th>
    </tr>
    <tr>
    <td colspan="1"><label for="itemDetailvar1'.$mCount.'">Track var1:</label></td> 
    <td colspan="1"><input type="text" size="25" name="itemDetails['.$mCount.'][var1]" value="" id="itemDetailvar1'.$mCount.'" " /></td>
    </tr>
<tr>
    <th colspan="2"><div id="itemPlacer"></div><a href="#" onclick="addNewItem(); return false;">Add Another Music Item</a>
    </td>
    </tr>
');
$mCount++;
?>
        <script type="text/javascript">
            var currCount = <?php echo($mCount); ?>;

            function addNewItem(){
jQuery("#itemPlacer").append('<tr><th colspan="2"><label>Track '+currCount+'</label></th></tr><tr><td colspan="1"><label for="itemDetailvar1'+currCount+'">Track var1:</label></td></tr>');             
                currCount++;
                return false;
            }
        </script>

我只需要知道一种使用jQuery添加一些基本表函数的方法，所以如果有人可以告诉我一个方法来让一个按钮说 “添加项目”然后单击，它会添加几个表行，这将是完美的！

Answer 1

我猜测＆＃34; itemPlacer＆＃34;是你桌子的id。试试这种方式：

function addNewItem(){
    jQuery("#itemPlacer tbody").append('<tr><th colspan="2"><label>Track '+currCount+'</label></th></tr><tr><td colspan="1"><label for="itemDetailvar1'+currCount+'">Track var1:</label></td></tr>');             
     currCount++;
    return false;
}

即使您没有在表格中创建<tbody>元素，浏览器通常也会对其进行更正＆＃34;并为你创造一个。

编辑：要在当前点击的行之后立即添加它们：

function addNewItem(element){
    jQuery(element.parentNode.parentNode).after('<tr><th colspan="2"><label>Track '+currCount+'</label></th></tr><tr><td colspan="1"><label for="itemDetailvar1'+currCount+'">Track var1:</label></td></tr>');             
     currCount++;
    return false;
}

你必须通过＆＃34;元素＆＃34;以这种方式对你的函数进行论证：

<a href="#" onclick="addNewItem(this); return false;">Add Another Music Item</a>

请注意，项目将在点击的行之后添加...如果添加超过1行，它将在您添加的最后一行之前添加（因此在点击的行之后）。我不知道你的行为是否是......

循环DIV不保持以前的表结构

1 个答案: