【问题标题】:Why does cloning the last element not work in jQuery?为什么克隆最后一个元素在 jQuery 中不起作用?
【发布时间】:2020-05-25 15:04:27
【问题描述】:

单击保存按钮后,我尝试克隆表的最后一行。但根本不会克隆并追加新行。

它应该做什么:点击保存 -> 附加一个<tr class="spacer"> 和一个新的<tr class="tr-shadow">。 截屏:

我的代码:

                                            ... <tr class="tr-shadow">
                                            <td><select name='weekday[]'>
                                                    <option value='0' selected hidden disabled>Auswählen</option>
                                                    <option value='1'>Montag</option>
                                                    <option value='2'>Dienstag</option>
                                                    <option value='3'>Mittwoch</option>
                                                    <option value='4'>Donnerstag</option>
                                                    <option value='5'>Freitag</option>
                                                    <option value='6'>Samstag</option>
                                                    <option value='7'>Sonntag</option></select></td>
                                            <td><input type="text" name="title[]" placeholder="Title"></td>
                                            <td><select name='rythm[]'>
                                                    <option value='1'>jede Woche</option>
                                                    <option value='2'>nur erster des Monats</option></select></td>
                                            <td><input type="time" name="time[]" placeholder="08:00" required></td>
                                        </tr><tr class="spacer"></tr>
                                    </tbody>

                                </table>
                                <br><input type="submit" id="date-submit" class="au-btn au-btn-icon au-btn--green au-btn--big" value="Save">

还有我的 jQuery:

                             <script> 
$("#date-submit").click(function(){
    event.preventDefault();
    //$('#dates .tr-shadow').eq(-1).after('<tr class="spacer">');
    $("#dates .tr-shadow:last").clone().add("#dates .tr-spacer:last");

    request = $.ajax({
    url: "./termin-update.php",
    type: "post",
    data: $("#entrydates").serialize(),
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        snackbar('Error','error');
    },
    success: function (response) {
        snackbar('Successfully saved','success');
    }

    });
});
        </script>   

【问题讨论】:

  • 您在任何地方都没有tr-spacer 课程。你只有spacer...
  • @trincot 哦,又一个错误。谢谢!

标签: javascript php jquery forms


【解决方案1】:

您正在创建一个克隆,但没有存储对它的引用或将插入方法链接到它....换句话说,对克隆什么都不做

尝试类似:

$('#myTable tbody')
    // append a new row clone
    .append($("#dates .tr-shadow:last").clone())
    // append another spacer after the clone
    .append('<tr class="spacer">')

【讨论】:

  • 这对我有用,非常感谢!但是 append 对我来说确实意味着在 tbody 之后插入了该行……但是为什么会在 tbody 之前发生这种情况?抱歉问了这个愚蠢的问题。
  • append() 将作为最后一行插入 &lt;tbody&gt; 内而不是在它之后
  • 好的,谢谢!但是现在的下一个问题是,通过单击“保存”从上面提交数据并提交最后一个新行,而不是克隆的元素(用户应不断添加新日期并单击“保存”,他应该得到一个输入的新行)。你对此有什么想法吗?
  • 您在表单控件的名称中使用了[],所以不,我不知道为什么会这样。
  • 嗯,我希望我能解决这个问题,否则这对我来说没用......似乎序列化不会“获取”克隆的元素......
猜你喜欢
  • 2012-12-21
  • 2019-02-02
  • 1970-01-01
  • 2012-09-22
  • 2014-08-22
  • 2016-06-21
  • 1970-01-01
  • 2014-01-04
  • 2016-02-01
相关资源
最近更新 更多