Question

我不知道我的代码会出现什么问题。我在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不起作用。

Answer 1

我添加了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>');
    });

jquery append add / remove tr不起作用

更新

1 个答案: