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

Ruddy 发表于 Dev

红润

一直在四处张望，我似乎找不到答案，所以也许我说错了，但事情就这样了。

因此，我有一个表来显示数据库中的数据。在jQuery中，我做到了这一点，因此可以用空输入添加一行，然后将其提交到数据库，这很好。

我现在正试图对其进行编辑。因此，每一行都有一个用于编辑该行的按钮，该按钮会将行值放入输入中，以便您可以更改值并更新数据库。我怎样才能做到这一点？我一直在这里使用它，但是我不确定在没有某种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>")

缪斯凡

有两种方法可以做到这一点，包括更改您的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
}

这是一个有效的例子

然后，您可以使用每个字段的ID值获取要保存的值，以进行您认为已实现的保存。

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。