-1

我有一个表单，其中有手机号码、姓名和电子邮件的输入字段。我有两个按钮添加和组。添加按钮添加所选记录的新记录。组按钮用于在记录上创建一组选定字段.所以当你点击组按钮时，它会询问是否创建一个组。如果是，那么它将创建一个名为 0 或 1 的组。但我想给一些名字（用户应该输入要给的名字）到组。请告诉我怎么做。这是小提琴，这是屏幕截图

这是jquery

var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
    var obj={};
    $('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" checked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }
    });
    $(document).on('click', '#btn2',function () {
        var creat_group = confirm("Do you want to creat a group??");
        if (creat_group) {
            console.log(obj);

            $("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
            $tr=$("#groupTr" + groupTrCount);
            $tr.append("<td >" + groupTrCount + "</td>");
            var userColumn = "<ul>";
            $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
                var count=0;
                $(this).find('td').each(function() {
                    if(count == 1){

                        userColumn+= "<li>" + $(this).html() + "</li>" ;
                    }
                    count++;
                    });
            });
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        if(!this.checked)
        {
            key=$(this).attr('name').replace('mytr','');
            alert(key);
            obj[key]=null;
        }
    });
});

在此处输入图像描述

4

3 回答 3

1

如果要添加命名组，请使用prompt而不是confirm. 这将打开一个弹出窗口，用户可以在其中输入组名。小提琴

$(document).on('click', '#btn2',function () {
    var creat_group = prompt("Name your group??");
    if (creat_group) {
        console.log(obj);

        $("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
        $tr=$("#groupTr" + groupTrCount);
        $tr.append("<td >" + creat_group + "</td>");
        var userColumn = "<ul>";
        $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
            var count=0;
            $(this).find('td').each(function() {
                if(count == 1){

                    userColumn+= "<li>" + $(this).html() + "</li>" ;
                }
                count++;
                });
        });
        userColumn+="<ul>";
        $tr.append("<td >" +userColumn+ "</td>");
    groupTrCount++;
    }        
});
于 2013-10-30T05:58:43.060 回答
0

您仅添加groupTrCount为列文本，因此您将 0, 1... 作为索引。你可以试试这样的

$tr.append("<td >Group: " + groupTrCount + "</td>");

代替

$tr.append("<td >" + groupTrCount + "</td>");

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
    $tr=$("#groupTr" + groupTrCount);
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
    var userColumn = "<ul>";
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
      var count=0;
      $(this).find('td').each(function() {
         if(count == 1){
        userColumn+= "<li>" + $(this).html() + "</li>" ;
         }
         count++;
    });
});

更新

要使用自定义弹出窗口，您可以通过在页面上使用单独的 div 来实现。overlay在CSS. _ 或者您可以使用JQUERY UI DIALOGUE轻松做到这一点。

于 2013-10-30T05:55:28.797 回答
0

更新小提琴：http: //jsfiddle.net/4GP9c/175/

var val = 0;
var groupTrCount = 0;
$(document).ready(function () {
    var obj={};
    $('#btn1').click(function () {
        if ($(".span4").val() != "") {
            $("#mytable").append('<tr id="mytr' + val + '"></tr>');
            $tr=$("#mytr" + val);
            $tr.append('<td class=\"cb\"><input type=\"checkbox\" value=\"yes\" name="mytr' + val + '" checked ></td>');
            $(".span4").each(function () {
                $tr.append("<td >" + $(this).val() + "</td>");
            });
            var arr={};
            name=($tr.find('td:eq(1)').text());
            email=($tr.find('td:eq(2)').text());
            mobile=($tr.find('td:eq(3)').text());
            arr['name']=name;arr['email']=email;arr['mobile']=mobile;
            obj[val]=arr;
            val++;
        } else {
            alert("please fill the form completely");
        }
    });
    $(document).on('click', '#btn2',function () {
        var creat_group = confirm("Do you want to creat a group??");
        if (creat_group) {
            console.log(obj);

            $tr.append("<td >" + groupTrCount + "</td>");

$("#groupsTable").append('<tr id="groupTr' + groupTrCount + '"></tr>');
    $tr=$("#groupTr" + groupTrCount);
    $tr.append("<td >Group:" + groupTrCount + "</td>"); // or you can use whatever name you want in place of "Group:"
    var userColumn = "<ul>";
    $('#mytable tr').filter(':has(:checkbox:checked)').each(function() {
      var count=0;
      $(this).find('td').each(function() {
         if(count == 1){
        userColumn+= "<li>" + $(this).html() + "</li>" ;
         }
         count++;
    });
});;
            userColumn+="<ul>";
            $tr.append("<td >" +userColumn+ "</td>");
        groupTrCount++;
        }        
    });
    $(document).on('change','#mytable input:checkbox',function () {
        if(!this.checked)
        {
            key=$(this).attr('name').replace('mytr','');
            alert(key);
            obj[key]=null;
        }
    });
});
于 2013-10-30T06:12:18.420 回答