1

周りを見回していて、これに対する答えが見つからないように見えるので、言葉遣いが間違っているかもしれませんが、ここにあります。

だから私はデータベースからのデータを表示するテーブルを持っています。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>")
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 に答える