Question

我有以下HTML代码，一个表

        <table id="namedConsultants" class="table table-striped">
            <thead>
                <tr>
                    <th>#</th>
                    <th>Consultant</th>
                    <th>Days Assigned</th>
                    <th></th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input class="form-control" id="ConID" name="ConID" readonly="true" type="hidden" value="4" /></td>
                    <td><input class="form-control" id="ConFullName" name="ConFullName" readonly="true" type="text" value="Person A" /></td>
                    <td><input class="form-control" id="ConTimeAssigned" name="ConTimeAssigned" readonly="true" type="text" value="1.0" /></td>
                    <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
                </tr>
                <tr>
                    <td><input class="form-control" id="ConID" name="ConID" readonly="true" type="hidden" value="2" /></td>
                    <td><input class="form-control" id="ConFullName" name="ConFullName" readonly="true" type="text" value="Person B" /></td>
                    <td><input class="form-control" id="ConTimeAssigned" name="ConTimeAssigned" readonly="true" type="text" value="1.0" /></td>
                    <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
                </tr>
            </tbody>
        </table>

我需要点击＆＃39;编辑＆＃39;链接到每个表格行旁边，然后将 ConFullName 和 ConTimeAssigned 传递给两个下拉列表

<select class="form-control" data-val="true" data-val-number="The field ConsultantID must be a number." id="ConsultantID" name="ConsultantID">
<option value="">Select</option>
</select>

<select class="form-control" data-val="true" data-val-number="The field daysAssigned must be a number." id="daysAssigned" name="daysAssigned">
<option value="">Select</option>
</select>

编辑＆＃39;链接它点击每个表行旁边，我想调用这样的JQuery函数，然后将数据传递到相应的下拉列表。

$("#namedConsultants").on('click', '.editConsultant', function () {

    //alert("test");
    //Get ConFullName and ConTimeAssigned and pass them to the two drop down lists

});

有没有人对如何使用我的JQuery函数传递这些数据有任何想法？

任何帮助表示感谢。

感谢。

更新

按要求删除重复ID

<tr>
<td><input type="hidden" name="ConID" class="form-control" readonly value="2" /></td>
<td><input type="text" name="ConFullName" class="form-control" readonly value="Person A" /></td>
<td><input type="text" name="ConTimeAssigned" class="form-control" readonly value="1.0" /></td>
<td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
</tr>

更新了JQuery功能

$("#namedConsultants").on('click', '.editConsultant', function () {

    //alert("test");
    var tr = $(this).closest("tr");
    var name = tr.find("input.ConFullName").val();
    var timeAssigned = tr.find("input.ConTimeAssigned").val();

    alert(name);
    alert(timeAssigned);

    //$("#ConsultantID").val(name);
    //$("#daysAssigned").val(timeAssigned);


});

Answer 1

你的桌子上有重复的ID，这很糟糕，ID 必须是唯一的！给那些inputs您希望定位一个类，然后使用this

的实例

$("#namedConsultants").on('click', '.editConsultant', function () {
    var tr = $(this).closest("tr");
    var name = tr.find("input.ConFullName").val();
    var timeAssigned = tr.find("input.ConTimeAssigned").val();

    //Append values to whichever dropdown you wish
});

我认为你会将重复的ID改为上面代码中的类

修改：使用name属性：

$("#namedConsultants").on('click', '.editConsultant', function () {
    var tr = $(this).closest("tr");
    var name = tr.find("input[name=ConFullName]").val();
    var timeAssigned = tr.find("input[name=ConTimeAssigned]").val();

    //Append values to whichever dropdown you wish
});

使用JQuery将表数据传递到下拉列表

1 个答案: