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>");

如何在Jquery函数中插入选择选项

2 个答案: