Question

所以我为弹出窗口和表单创建了一个表格表元素和函数。单击保存按钮时附加元素也可以。但是，在新的弹出窗口中，无论单元格是满还是空，表单中的数据都会附加到每个先前单击的表格单元格中。我试图用当前生成的ID填充单元格。考虑到我是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 });

更新小提琴：https://jsfiddle.net/9zcj3ab8/27/

Answer 2

我不知道为什么会发生这种情况，但是如果你删除我认为它是引导模式的属性，你就会得到所需的行为。我认为与你有关的东西是你之前点击的每个单元格引用模态，但删除它似乎正常工作的属性。

在您的代码中更新此内容：

    $('#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 */

如何从弹出窗体中追加当前单击的表元素中的元素？

2 个答案: