加入JavaScript删除行发送的形式，而不是添加行(Javascript add delete

任何人都可以帮我这个脚本。为什么这种形式提交，而不是在表上添加一个新行？如果我删除了形式的标签和提交按钮它运作良好，添加和删除行。

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

默认情况下，提交表单，所以你需要防止默认的点击行为：

$("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删除行发送的形式，而不是添加行(Javascript add delete

Answer 1:

Answer 2:

Answer 3:

Answer 4:

收藏的人(0)

举报内容

检举类型

检举原因

检举说明(必填)

打开微信“扫一扫”，打开网页后点击屏幕右上角分享按钮