0

我不知道我的代码会出现什么问题。我在http://jsfiddle.net/jc_garcia0527/XwcK6/中对其进行了测试，它工作正常。

但是在浏览器中使用它。它没有用。

我正在使用 jquery 1.9.1

这是脚本：

$(document).ready(function(){
$(".add_row").click(function(){
    $("#dynamic").append('<tr><td><table align="center"><tbody><tr><td><input type="checkbox" name="checkbox[]" value="0" class="id" id="checkbox" checked><b>Supplier:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>Material:</b></td><td><input type="text" name="mat[]"></td></tr><tr><td><b>P.O No:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>DR/SI No.:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td align="center" colspan="2">ETC.....</td></tr></tbody></table></td><td align="center"><button class="remove_row">X</button></td></tr>');
});
$("#dynamic").on('click','.remove_row',function(){
    $(this).parent().parent().remove();
});
});

这就是我应用它的地方。

<table align='center' border='1'>
<thead>
    <th style="padding:10px;">Sample Add rows</th>
    <th width='10'><button class='add_row'>+</button></th>
</thead>
<tbody id='dynamic'>
    <tr>
        <td>
            <table align='center'>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' checked>
                            <b>Supplier:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>Material:</b>
                        </td>
                        <td>
                            <input type='text' name='mat[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>P.O No:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>DR/SI No.:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td align='center' colspan='2'>
                            ETC.....
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td align='center'>
            <button class='remove_row'>X</button>
        </td>
    </tr>
</tbody>
   </table>

我还检查了我的萤火虫，没有断点。当我单击添加按钮时，附加的 TR 将再次出现并消失。

更新

<form action='' method='POST' name='test'>
<table align='center' border='1'>
<thead>
    <th style="padding:10px;">Sample Add rows</th>
    <th width='10'><button class='add_row'>+</button></th>
</thead>
<tbody id='dynamic'>
    <tr>
        <td>
            <table align='center'>
                <tbody>
                    <tr>
                        <td>
                            <input type="checkbox" name="checkbox[]" value="0" class="id" id='checkbox' checked>
                            <b>Supplier:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>Material:</b>
                        </td>
                        <td>
                            <input type='text' name='mat[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>P.O No:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td>
                            <b>DR/SI No.:</b>
                        </td>
                        <td>
                            <input type='text' name='supp[]'>
                        </td>
                    </tr>
                    <tr>
                        <td align='center' colspan='2'>
                            ETC.....
                        </td>
                    </tr>
                </tbody>
            </table>
        </td>
        <td align='center'>
            <button class='remove_row'>X</button>
        </td>
    </tr>
</tbody>
  </table>
  <center><input type='submit' value='SAVE'></center>
  </form>

这将是格式。当有表单时，jquery 不起作用。

4

1 回答 1

0

我添加了 preventDefault();

代码：

$(document).ready(function(){
$(".add_row").click(function(){
    $("#dynamic").append('<tr><td><table align="center"><tbody><tr><td><input type="checkbox" name="checkbox[]" value="0" class="id" id="checkbox" checked><b>Supplier:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>Material:</b></td><td><input type="text" name="mat[]"></td></tr><tr><td><b>P.O No:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>DR/SI No.:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td align="center" colspan="2">ETC.....</td></tr></tbody></table></td><td align="center"><button class="remove_row">X</button></td></tr>');
});

至：

$(".add_row").click(function(e){
        e.preventDefault();
        $("#dynamic").append('<tr><td><table align="center"><tbody><tr><td><input type="checkbox" name="checkbox[]" value="0" class="id" id="checkbox" checked><b>Supplier:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>Material:</b></td><td><input type="text" name="mat[]"></td></tr><tr><td><b>P.O No:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td><b>DR/SI No.:</b></td><td><input type="text" name="supp[]"></td></tr><tr><td align="center" colspan="2">ETC.....</td></tr></tbody></table></td><td align="center"><button class="remove_row">X</button></td></tr>');
    });
于 2013-09-30T08:04:50.587 回答