1

Been looking around and I cant seem to find an answer to this so maybe im wording it wrong but here it goes.

So I have a table displaying data from a database. In jQuery I have made it so a row can be added with empty inputs and then submitted to the database, this works fine.

I am now attempting to be able to edit it. So each row will have a button to edit that row, the button will put the row values into inputs so you can change the value and update the database. How can I do this? I was looking into using this here but Im not sure how I can get the value of the input boxes without them having some sort of ID.

jQuery I was trying to use:

$('#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));
            }
    });
});

Am I over thinking this? Should I just be grabbing the values and then putting them in pre-made input boxes?

Update:

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>")
4

2 回答 2

2

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

这是一个工作示例

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

于 2013-11-05T10:22:04.463 回答
0

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

于 2013-11-05T10:15:42.637 回答