Question

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

这是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;
        }
    });
});

enter image description here

Answer 1

如果要添加命名组，请使用prompt代替confirm。这将打开一个弹出窗口，用户可以在其中输入组名称。 Fiddle

$(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++;
    }        
});

Answer 2

您只是将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轻松完成此操作。

Answer 3

更新小提琴： 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;
        }
    });
});

如何从警告框中获取输入文本

3 个答案: