Question

我已获得有关如何执行某些功能的非常具体的说明。

在网站上，您可以创建活动并进行编辑。这些活动可以有嘉宾，与参加活动的普通成员不同。

每个客人都必须由成员邀请。所以我有一个显示成员的表，在那个表中我有一张图片。当您单击所说的图片时，它将显示一个来宾列表，这是活动的一部分。

所有这些已经有效，但是现在出现了我无法执行的部分。

现在，管理员需要能够选择一位客人。单击一行后，必须将其从表格中取出并显示在单独的HTML表格中，以防可以选择多个来宾。

此后，管理员需要按下“提交”按钮以邀请来宾参加活动。

现在我的明确问题是：

如何使行可选？我找到了this，但是如果尝试使用它，则会收到错误消息TypeError: $(...).selectable is not a function。编辑：我也找到了this。当我使用它时，我的控制台没有任何错误，但是仍然无法正常工作。可能是它无法识别我的桌子吗？
如何在单独的HTML表中显示行？也许有$("#row").click(function()？

我尝试进行足够的研究，以保证提出这样一个具体的问题，所以请不要说“只是用谷歌搜索”。相反，我将非常感谢您将我链接到正确的来源！我不希望有人为我做这件事，我只是感谢您的帮助！ :)我对jQuery和AJAX还是很陌生。

这是我的用于显示表格的jQuery，用于上下文：

$(document).ready(function(){
    $("#show_guests").click(function(){
        event.preventDefault();
        $.ajax({
            url: '/widenmoos/administrator/components/com_memberportal/anlassansicht/Gast_Liste.php',
            success: function(data,status)
            {
                createTableByForLoop(data);

            },
            async:   true,
            dataType: 'json'
            }); 

        });
    });

    function createTableByForLoop(data)
    {
        var eTable='<table id="Selectable_Guest_Table"><tr><th>Guest</th>'
        for(var i=0; i<data.length;i++)
        {
            eTable += "<tr>";
            eTable += "<td>"+data[i][0]+ " " +data[i][1] + ", " +data[i][2]+"</td>";
            eTable += "</tr>";
        }
        eTable +="</table>";
        $('#forTable').html(eTable);
    }

Answer 1

尝试以下代码：我正在动态创建一个包含所选来宾的新表。然后，您可以使用与存储各行的来宾属性相同的方式来移动参数，并在需要发送电子邮件时使用它们。

function createTableByForLoop(data)
{
    var eTable= $("<table  />").attr("id","Selectable_Guest_Table").append(
        $("<tr />").append(
            $("<th />").html("Guest")
        )
    );
    for(var i=0; i<data.length;i++)
    {
        eTable.append(
            // you can store whatever data comes from the js object in this way:
            // (in case you can stringify the entire object and store it as row attribute)
            $("<tr />").attr("data0",data[i][0]).attr("data1",data[i][1]).attr("data2",data[i][2]).append(
                $("<td />").html(data[i][0]+ " " +data[i][1] + ", " +data[i][2])
            ).click(function()
            {
                var data0 = $(this).attr("data0");
                var data1 = $(this).attr("data1");
                var data2 = $(this).attr("data2");
                $("#selected_guests").append(
                    $("<tr />").append(
                        $("<td />").html(data0+" "+data1+" "+data2)
                    )
                );
                // Remove row from original table
                $(this).remove();
            })
        );
    }

    var selectedGuestsTable = $("<table />").attr("id","selected_guests").append(
        $("<tr />").append(
            $("<th />").html("Selected Guest")
        )
    );

    $('#forTable').append(
        eTable,
        selectedGuestsTable
    );
}

顺便说一句，最好的方法是仅在两个表行上传递来宾ID，然后在需要时从数据数组中引用整个对象。

使用AJAX显示表，选择行，在其他表中显示行，保存到数据库

1 个答案: