如何使用jQuery以逗号分隔将多个值添加到输入框

时间:2015-05-25 10:39:14

标签: javascript jquery

这是我的代码:

$("#fillMemberTable").click(function(e) {
    var tableBody = new Array();

    // add object
    tableBody = "<tr id='tr" + result.id + "'>"
            + "<td>" + result.code + "</td> "
            + "<td>" + result.name + " </td>"
            + "<td>" + result.family + " </td>"
            + "<td>" + result.fatherName + "</td>"
            + "<td>" + result.nationalCode + "</td>"
            + "<td>" + result.defaultUserContact_mobileNo + "</td>"
            + "<td>" + result.valid + "</td>"
            + "<td><input type='button'  id='" + result.id + "' value='<spring:message code="form.btnDelete"/>'></td></tr>";

    //add to the table
    $("#membersTable").append(tableBody);
    //$("#members").val(result.id);

    e.preventDefault();

    var elem = $(this).parent().find('input[name=members\\[\\]]');
    elem.val(elem.val() + ',');
    //            $("#members").val(elem);

    $("#members").val(elem.toString());
    // The remove button click
    $("#" + result.id).click(function() {
        var buttonId = $(this).attr("id");
        //write the logic for removing from the array
        $("#tr" + buttonId).remove();
        $("#members").val('');
    });
});

和HTML代码:

<div class="form-group">
    <label class="col-sm-3 control-label"><spring:message code="core.Specifications" />: </label>
    <div class="col-sm-8">
        <label  id="lblMemberSpecifications"></label>
    </div>
    <div>
        <input type="button" id="fillMemberTable"  class="btn btn-default" value="<spring:message code="core.Submit" />" />
    </div>
</div>   
<div class="form-group">               
    <input type="text" id="members" name="core[members]" />
</div> 

<div class="form-group">
    <div >
        <table id="membersTable" class="table table-bordered" style=" width: auto;  margin-left: auto; margin-right: auto;">
            <thead>
                <tr>
                    <th style="width: 100px; text-align: center"><spring:message code="core.MemberCode" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.MemberFname" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.MemberLname" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.memberFatherName" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.MemberNationalcode" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.cellPhone" /></th>
                    <th style="width: 100px; text-align: center"><spring:message code="core.userStatus" /></th>
                    <th style="width: 100px;" ></th>
                </tr>
            </thead>
        </table>
    </div>  
</div>

我想获取结果值,并在用逗号分隔的输入框va中设置此值,但代码不起作用。

谢谢。

1 个答案:

答案 0 :(得分:0)

这可以使用数组完成。并且可以从表中删除

此代码有效:

var memberArray = []; $(“#fillMemberTable”)。点击(function(e){

        if ($("#h_id").val() == result[0])
        {
            showAlertModal('<spring:message code="NoDelete"/>', false);
            return false;
        }
        if (!$("tr#member" + result[0]).length)
        {
            // add object
            valid = (result[8]) ? '<i class="fa fa-check"></i>' : '<i    class="fa fa-times"></i>';
            var tableBody = "<tr id='member" + result[0] + "'>"
                    + "<td>" + ((result[1] !== null) ? result[1] : "-") + "</td> "
                    + "<td>" + ((result[2] !== null) ? result[2] : "-") + " </td>"
                    + "<td>" + ((result[3] !== null) ? result[3] : "-") + " </td>"
                    + "<td>" + ((result[4] !== null) ? result[4] : "-") + "</td>"
                    + "<td>" + ((result[6] !== null) ? result[6] : "-") + "</td>"
                    + "<td>" + ((result[7] !== null) ? result[7] : "-") + "</td>"
                    + "<td>" + valid + "</td>"
                    + "<td><input type='button' class='btn btn-danger' value='<spring:message code="btnDelete"/>' onclick='removeMember(" + result[0] + ")' ></td></tr>";

            //add to the table

            $("#membersTable").append(tableBody);

            memberArray.push(result[0]);
            $("#members").val(memberArray);
        }
    });

function removeMember(id)     {         $(“tr#member”+ id).remove();         var index = memberArray.indexOf(id);         if(index&gt; -1){             memberArray.splice(index,1);             $( “#会员”)VAL(memberArray)。         }     }