Question

一直在环顾四周，我似乎无法找到答案，所以也许我的措辞不对，但就在这里。

所以我有一个显示数据库数据的表。在jQuery中我已经创建了它，因此可以使用空输入添加一行，然后提交到数据库，这样可以正常工作。

我现在正在尝试编辑它。因此每行都有一个用于编辑该行的按钮，该按钮会将行值放入输入中，以便您可以更改该值并更新数据库。我怎样才能做到这一点？我正在研究使用this here，但我不知道如何在没有某种ID的情况下获取输入框的值。

jQuery我试图使用：

$('#tbl').on('click','.xx',function() {
    $(this).siblings().each(
        function(){
            if ($(this).find('input').length){
                $(this).text($(this).find('input').val());
            }
            else {
                var t = $(this).text();
                $(this).text('').append($('<input />',{'value' : t}).val(t));
            }
    });
});

我在想这个吗？我应该抓住这些值，然后将它们放入预制的输入框中吗？

更新

HTML：

sb.AppendLine("<table style='width: 80%;'>")
sb.AppendLine("<tr class='inputRowbelow'>")
sb.AppendLine("<td style='width: 20%;' class='ui-widget-header ui-corner-all'>Area</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Details</td>")
sb.AppendLine("<td class='ui-widget-header ui-corner-all'>Options</td>")
sb.AppendLine("</tr>")

For Each w In workItems
    sb.AppendLine("<tr>")
    sb.AppendLine("<td>" & w.area & "</td>")
    sb.AppendLine("<td>" & w.details & "</td>")
    sb.AppendLine("<td><a href='#' class='fg-button ui-state-default ui-corner-all edit'><img src='/images/spacer.gif' class='ui-icon ui-icon-pencil' /></a></td>")
    sb.AppendLine("</tr>")
Next

sb.AppendLine("</table>")

Answer 1

有几种方法可以做到这一点，包括更改VB代码以向html添加额外数据，但我将从纯javascript / JQuery解决方案中回答这个问题。

首先，您需要为每个编辑按钮处理click事件，然后找到匹配的行，然后您可以获得该行的第一个td元素...

$(".edit").click(function(e){
    e.preventDefault();//prevent the link from navigating the page
    var button = $(this);//get the button element
    var row = button.closest("tr");//get the row that the button belongs to
    var cellArea = row.find("td:eq(0)");//get the first cell (area)
    var cellDetails = row.find("td:eq(1)");//get the second cell (details)

    //now you can change these to your inputs and process who you want
    //something like this...
    ConvertToInput(cellArea, "area");
    ConvertToInput(cellDetails, "details");
});

function ConvertToInput(element, newId){
    var input = $("<input/>");//create a new input element
    input.attr("id", newId);//set an id so we can find it
    var val = element.html();//get the current value of the cell
    input.val(val);//set the input value to match the existing cell
    element.html(input);//change the cell content to the new input element
}

Here is a working example

然后，您可以执行您已说明已实施的保存，使用每个字段的ID值来获取要保存的值。

Answer 2

使用带有计数器的For循环，而不是使用For Each ... in ... Next循环。给每个按钮和每一行一个ID，最后给出当前计数器值。然后，您可以使用Jquery使每一行分别编辑，因为每行现在都有一个行号。

HTML：从没有ID的输入中获取值

jQuery我试图使用：

更新

2 个答案: