需要使用JQuery將數據從下拉列表傳遞到表

Question

完全不了解這一點，甚至不確定是否有可能，但是如果有人可以幫助，Stack Overflow可以。

對，我有桌子

<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 type="hidden" name="ConID" class="form-control" readonly value="4" /></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>
    <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 B" /></td>
        <td><input type="text" name="ConTimeAssigned" class="form-control" readonly value="2.0" /></td>
        <td><a href="javascript:void(0);" class="editConsultant">Edit</a></td>
    </tr>
</tbody>
</table>

當單擊表行旁邊的“編輯”鏈接時， 會將值ConID （隱藏）和ConTimeAssigned傳遞到JQuery函數，然后將它們傳遞到兩個下拉列表中， ConsultantID和daysAssigned 。

<select id="ConsultantID" name="ConsultantID">
<option value="">Select</option>
</select>

<select id="daysAssigned" name="daysAssigned">
<option value="">Select</option>
</select>


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

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

    $("#ConsultantID").val(conID);
    $("#daysAssigned").val(timeAssigned);

});

所有這一切。 現在，在此階段，用戶可以更新分配給他們單擊以編輯的顧問的日期。 分配的天是一個下拉列表，列表項從1到300。

當用戶在天數下拉列表中選擇新值時，他們可以單擊“更新”按鈕，這將更新名為Consultants的表中的顧問ConTimeAssigned 。

$("#btnUpdateConsultant").click(function (e) {

    var consultantID = $("#ConsultantID").val();
    var newDays = $("#daysAssigned").val();

    alert(newDays);

    e.preventDefault(); 

});

這里沒有數據庫活動，這純粹是嘗試從表行中獲取數據，將其傳遞到下拉列表中，更改值，然后再次將其傳遞回表行。

就像我說的，我真的不知道該怎么做，對此有任何幫助或建議將不勝感激。

謝謝大家。

Answer 1

似乎您幾乎已經使用以下行完成了此操作：

var timeAssigned = tr.find("input[name=ConTimeAssigned]").val();

這是在獲取值，但是如果您對其進行一些修改：

tr.find("input[name=ConTimeAssigned]").val(newVal);

它沒有輸入值。

那么找到正確的單元格是您的問題還是...？

更新：

所以你有這行：

var conID = tr.find("input[name=ConID]").val();

在它后面添加：

var conIDelement = tr.find("input[name=ConID]");

現在，當您想使用更新后的值對其進行更改時，可以執行以下操作：

$(conIDelement).val(newVal);

Answer 2

如何緩存當前正在編輯的tr ，如下所示：

var editedTr = null;
$(".editConsultant").on("click", function(e) { 
   editedTr = $(this).closest("tr");
   // do the rest of your stuff ...
});

然后，當您保存時：

$("#btnUpdateConsultant").on("click", function(e) { 
    if(editedTr !== null && editedTr !== "undefined") { 
        // do some validation or whatever ...
        editedTr.find("input[name=ConTimeAssigned]").val(daysAssigned.val());
    }
});

我試圖准備一個非常簡單的小提琴