javascript - HTML:从没有 ID 的输入中获取值

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 解决方案中回答这个问题。

首先你需要处理每个编辑按钮的点击事件，然后你找到匹配的行，然后你可以得到该行的第一个到 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 值来获取要保存的值，然后执行您所说的已经实现的保存。