Question

任何人都可以帮助我使用这个脚本。为什么要提交此表单，而不是在表格上添加新行？如果我删除表单标签和提交按钮，则可以很好地添加和删除行。

<html>
      <head>
 <script src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
      <script>
       document).ready(function() {
      var id = 0;
         // Add button functionality
         $("table.dynatable button.add").click(function() {
            id++;
            var master = $(this).parents("table.dynatable");

            // Get a new row based on the prototype row
            var prot = master.find(".prototype").clone();
            prot.attr("class", "")
            prot.find(".id").attr("value", id);

            master.find("tbody").append(prot);
        });

        // Remove button functionality
        $("table.dynatable input.remove").live("click", function() {
            $(this).parents("tr").remove();

        });
    });
    </script>
    <style>
        .dynatable {
            border: solid 1px #000; 
            border-collapse: collapse;
        }
        .dynatable th,
        .dynatable td {
            border: solid 0px #000; 
            padding: 2px 10px;
            width: 170px;
            text-align: center;
        }
        .dynatable .prototype {
            display:none;
        }
      </style>
</head>
   <body>
    <FORM name="save_event_personal" method="post" action="fetchrequest.php">

    <table class="dynatable">
        <thead>
            <tr>
                <th>ID</th>
                <th>Name</th>
                <th>Start</th>
                <th>Ende</th>
                <th><button class="add">Add</button></th>
            </tr>
        </thead>
        <tbody>
            <tr class="prototype">
                <td><input type="text" name="id[]" value="0" class="id" /></td>
                <td><input type="text" name="name[]" value="" /></td>
                <td><SELECT name="start[]">
                <OPTION value="10:00">10:00</OPTION>
                <OPTION value="11:00">11:00</OPTION>
                <OPTION value="12:00">12:00</OPTION>
                <OPTION value="13:00">13:00</OPTION>
                <OPTION value="14:00">14:00</OPTION>
            </SELECT></td>
                <td><SELECT name="end[]">
                <OPTION value="10:00">10:00</OPTION>
                <OPTION value="11:00">11:00</OPTION>
                <OPTION value="12:00">12:00</OPTION>
                <OPTION value="13:00">13:00</OPTION>
                <OPTION value="14:00">14:00</OPTION>
            </SELECT</td>
                <td><input type="image" class="remove" src="delete.png" alt="hi"/>
            </tr>

                 </table>
     <BR /><INPUT type="submit" value="Sumbit this form to fetchrequest.php" />
      </FORM></body>
   </html>

Answer 1

尝试阻止按钮的默认操作，即提交表单：

$("table.dynatable button.add").click(function(e) {
    ...
    e.preventDefault();
});

Answer 2

<input type="image">

默认提交表单，因此您需要点击prevent default行为：

$("table.dynatable input.remove").live("click", function( e ) {
    e.preventDefault();
    $(this).parents("tr").remove();
});

并且您的脚本顶部有错误：

document).ready(function() {
...

应该是

$(document).ready(function() {
...

添加行功能相同：

$("table.dynatable button.add").click(function( e ) {
    e.preventDefault();
    ...

Answer 3

默认情况下，在Internet Explorer上，按钮是“提交按钮”。你应该像这样修改你的按钮：

<th><button type="button" class="add">Add</button></th>

您还可以在false回调中返回click。

Answer 4

默认情况下，元素实际上会提交当前表单。

您可以添加type="button"来阻止这种情况：

<button type="button" class="add">Add</button>

Javascript添加删除行发送表单而不是添加行

4 个答案: