如何从弹出表单中在当前单击的 table 元素中附加元素？

Question

所以我为弹出窗口和表单制作了 table table 元素和函数。单击保存按钮附加元素也可以。但是，在新的弹出窗口中，无论单元格是否已满或 empty.I 以某种方式尝试使用当前生成的 ID 填充单元格，表单中的数据都会附加到每个先前单击的 table 单元格中。考虑到我是 JavaScript 的新人，我完全错过了一些东西有人能告诉我那是什么吗？代码

//================ADDs  POPUP ON CLICK================/
$(document).ready(function () {
    /*Adding the klikanje class to  td*/
    $('table tbody tr:not(:first) td').addClass('klikanje');
    /*removing the klikanje class from the first column*/
    $('table tr:first-child, table td:first-child').removeClass('klikanje');
    /*removing the klikanje class from the first row*/
    $('table tbody tr:first-child td').removeClass('klikanje');
    /*Making random id*/

    /*appending data atributs to empty td*/
    $('.klikanje').click(function(){
        var self = $(this);
        if ($(this).is(':empty')) {
            var idBase = 'clickId-';
            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min)) + min;
            }
            var idNumber = getRandomInt(1, 1000000);
            var clickID = idBase + idNumber
            var callingID = '#' + clickID;
            $(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });

            /*save to td */
            $('#save').click(function () {
                var theName = $('input[name=name]').val();
                var theLastName = $('input[name=lastname]').val();
                var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
                if((theLastName+theLastName).length > 0){
                $(callingID).append($fullCell);
                $(callingID).css('background-color', 'yellow');

                }

            });  /*save to td end */



        } else {
            alert('Already taken spot. Please pick another one!');
            $(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
        }

    });



});//<---ADDs  POPUP ON CLICK END

完整代码：JsFiddle

Answer 1

您需要在保存值后清空字段，因为会反复使用相同的弹出窗口 html，一旦在输入元素中输入的值将保留在那里，直到手动清除。

使用下面的代码。

 var callingID = "";        
$('.klikanje').click(function(){
    var self = $(this);
    if ($(this).is(':empty')) {
        var idBase = 'clickId-';
        function getRandomInt(min, max) {
            return Math.floor(Math.random() * (max - min)) + min;
        }
        var idNumber = getRandomInt(1, 1000000);
        var clickID = idBase + idNumber
        callingID = '#' + clickID;
        $(this).attr({ 'data-toggle': 'modal', 'data-target': '#popUp', 'id': clickID });

已更新 fiddle：https://jsfiddle.net/9zcj3ab8/27/

Answer 2

我不知道为什么会这样，但是如果您删除我认为是 bootstrap 模态的属性，您会得到所需的行为。我认为与您之前单击的每个单元格都引用模态有关，但删除它似乎可以正常工作的属性。

在您的代码中更新：

    $('#save').click(function () {
      var theName = $('input[name=name]').val();
      var theLastName = $('input[name=lastname]').val();
      var $fullCell = $('<p>' + theName + '' + theLastName + '</p>');
      if((theLastName+theLastName).length > 0){
      $(callingID).append($fullCell);
      $(callingID).css('background-color', 'yellow');
      $(this).attr({ 'data-toggle': '', 'data-target': '', 'id': '' });
    });  /*save to td end */

如何从弹出表单中在当前单击的 table 元素中附加元素？

How to append element in the currently clicked table element from popup form?

javascript

jquery

schedule