如何採取輸入文本從警告框

Question

我在其中也有對於手機號碼，姓名和email.I輸入字段有兩個按鈕添加和group.Add按鈕添加所選records.Group按鍵的新紀錄是一種形式用於在記錄中創建一組選定的字段。所以當你點擊組按鈕時，它會詢問是否創建一個組。如果是，那麼它會創建一個名爲0或1的組。但是我想給一些名（用戶必須鍵入要指定的名稱）到group.Please告訴我如何do.This是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; 
     } 
    }); 
}); 

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

UPDATE

對於使用自定義彈出要麼你可以讓你的網頁在一個單獨的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; 
     } 
    }); 
});