Question

以下是添加动态行的脚本。只有一个错误，它完全正常。当我点击Add link时，它会添加新行。但是，初始行（仅选择输入标记）位于下方，而新行而其他行仅保留在那里:( 请参阅下面的HTML代码。

有关更多说明，请参阅此图片：

<script type="text/javascript" src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js"></script>

<script type="text/javascript">
    $(function(){  var newRowNum = 0;
        $('#addnew').click(function(){
            newRowNum += 1;
            var addRow = $(this).parent().parent();
            var newRow = addRow.clone();
            $('input', addRow).val('');
            $('td:first-child', newRow).html(newRowNum);
            $(':input', newRow).each(function(i){
                var newID = newRowNum + '_' + i;
                $(this).attr('id',newID).attr('name',newID);
            });
            addRow.before(newRow);
            $('a.remove', newRow).click(function(){
                $(this).parent().parent().remove();
                newRowNum -= 1;
                return false;
            });
            $('#go').click(function(){
                var numRows=$('#tabdata tbody tr').length;
                $('#myHiddenInput').val(numRows);
            });
            return false;  });  });
</script>

这是HTML部分

<form action="issue-item.php" method="POST">
    <fieldset style="width: 1714px;">
        <legend style="font-family: fantasy; font-style: !important; color: teal; font-size:30px ;">Issue</legend><br /><br />

        <table id="tabdata" align="left" cellpadding="0" cellspacing="0" border="0">
            <thead>
                <tr>
                    <td>S.No.</td>
                    <td align="center">Date</td>
                    <td align="center">Name of Person</td>
                    <td align="center">Name Of Item</td>
                    <td align="center">Quantity</td>
                    <td align="center">Purpose</td>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td><a id="addnew" href="">Add</a></td>
                    <td><input type="text" name="0_0" style="width: 120px;"/></td>
                    <td><input type="text" name="0_1" style="width: 170px;"/></td>
                    <td>
                        <select name="0_2" size="1">
                            <option>Choose item</option>
                            <?php
                                require('blogic.php');
                                $obj = new blogic();
                                $result = $obj->select("select id,name_item from store_item");
                                $count=$obj->select("SELECT COUNT(*) FROM store_item");
                                $obj->rows = mysql_num_rows($count);
                                while($objres = mysql_fetch_row($result))
                                {
                                    $str=<<<here
                                    <option value="$objres[0]">$objres[1]</option>
                                    here;
                                    echo $str;
                                }
                            ?>
                        </select>
                    </td>
                    <td><input type="text" name="0_3" style="width: 80px;"/></td>
                    <td><input type="text" name="0_4" style="width: 280px;"/></td>
                </tr>

                <tr>
                    <td>
                    <input type="hidden" id="myHiddenInput" name="myHiddenInput" value="1"/>
                    </td>
                </tr>

                <tr><td><input id="go" name="go" type="submit" /></td></tr>
            </tbody>
        </table>
    </fieldset>
</form>

Answer 1

在$('input', addRow).val('');之后添加以下行：

$('select', newRow).val($('select', addRow).val());
$('select', addRow).val('');

另见my example。

=== UPDATE ===

或者将$('input', addRow).val('');替换为：

$('select', newRow).val($('select', addRow).val());
$(':input', addRow).val('');

另见my updated example。

使用jQuery动态添加输入行时放置问题

1 个答案: