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

【问题标题】：Javascript add delete row sends form instead of adding rowJavascript添加删除行发送表单而不是添加行
【发布时间】：2012-12-02 14:21:24
【问题描述】：

谁能帮我写这个脚本。为什么要提交此表单，而不是在表格上添加新行？如果我删除表单标签和提交按钮，添加和删除行效果很好。

<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>

【问题讨论】：

标签： javascript forms html-table row dynatable

【解决方案1】：

<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();
    ...

【讨论】：

也谢谢你。抱歉，脚本上的错误是由于复制和粘贴造成的

【解决方案2】：

默认点击时元素实际提交当前表单。

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

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

【讨论】：

【解决方案3】：

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

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

您也可以在您的click 回调中返回false。

【讨论】：

【解决方案4】：

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

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

【讨论】：

完美这对我有帮助 ;-)