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。

当用户在日期下拉列表中选择新值时，他们可以点击更新按钮，然后更新表格 namedConsultants 中的顾问 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());
    }
});

我尝试准备一个非常简化的fiddle

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

2 个答案: