Question

我想插入一個選項在我可以選擇男性或女性的功能。

這裏是我的職責，

function Add(){ 
    $("#myTable tbody").append(
     "<tr>"+ 
     "<td><input type='text'/></td>"+ 
     "<td><input type='text' maxlength= '2' onkeypress='return(isNumberKey(event));' /></td>"+ 
     "<td>"WANT TO ADD SELECT OPTION HERE</td>"+ 
     "<td><input type = 'button' value='Save' class='btnSave'><input type='button' value='Delete' class='btnDelete'/></td>"+ 
     "</tr>"); 

    $(".btnSave").bind("click", Save);  
    $(".btnDelete").bind("click", Delete); 

現在的另一個問題是如何挽救我的選擇的選項在我的表，並關閉它在保存和當點擊生病啓用的編輯按鈕一次。

這是我保存和編輯功能

function Edit(){ 
    var par = $(this).parent().parent(); //tr 
    var tdName = par.children("td:nth-child(1)"); 
    var tdAge = par.children("td:nth-child(2)"); 
    var tdGender = par.children("td:nth-child(3)"); 
    var tdButtons = par.children("td:nth-child(4)"); 

    tdName.html("<input type='text' id='txtName' value='"+tdName.html()+"'/>"); 
    tdAge.html("<input type='text' id='txtage' value='"+tdAge.html()+"'/>"); 
    tdGender.html(tdGender.html()); 
    tdButtons.html("<input type='button' value = 'Save' class='btnSave'/><input type='button' value='Delete' class='btnDelete'/>"); 

    $(".btnSave").bind("click", Save); 
    $(".btnEdit").bind("click", Edit); 
    $(".btnDelete").bind("click", Delete); 
}; 

function Save(){ 
    var par = $(this).parent().parent(); 
    var tdName = par.children("td:nth-child(1)"); 
    var tdAge = par.children("td:nth-child(2)"); 
    var tdGender = par.children("td:nth-child(3)"); 
    var tdButtons = par.children("td:nth-child(4)"); 

    tdName.html(tdName.children("input[type=text]").val()); 
    tdAge.html(tdAge.children("input[type=text]").val()); 
    tdGender.html(tdGender.children("input[type=text]").val()); 
    tdButtons.html("<input type='button' value='Edit' class='btnEdit'/><input type ='button' value='Delete' class='btnDelete'/>"); 


    $(".btnEdit").bind("click", Edit); 
    $(".btnDelete").bind("click", Delete); 
}; 

Answer 1

我認爲你是幾乎沒有。

$("#myTable tbody").append(
     "<tr>"+ 
     "<td><input type='text'/></td>"+ 
     "<td><input type='text' maxlength= '2' onkeypress='return(isNumberKey(event));' /></td>"+ 
     "<td><select><option value='male'>Male</option><option value='female'>Female</option></select></td>"+ 
     "<td><input type = 'button' value='Save' class='btnSave'><input type='button' value='Delete' class='btnDelete'/></td>"+ 
     "</tr>"); 

Answer 2

使用單選按鈕而不是選擇更好的UI和UX。

$("#myTable tbody").append(
     "<tr>"+ 
     "<td><input type='text'/></td>"+ 
     "<td><input type='text' maxlength= '2' onkeypress='return(isNumberKey(event));' /></td>"+ 
     "<td><input type="radio" name="sex" value="male">Male<br><input type="radio" name="sex" value="female">Female</td>"+ 
     "<td><input type = 'button' value='Save' class='btnSave'><input type='button' value='Delete' class='btnDelete'/></td>"+ 
     "</tr>");