0

過去2日間jqueryを使用して、ajax.iを介してサーブレットを呼び出して更新を実行するために必要なセル値を取得しようとしています。ダブルクリックイベントを使用して、値を編集するためにセルをテキストボックスに置き換えました。フォーカス値がサーブレットに渡されます。テーブルを更新するために、編集された値を ID 番号とともに渡す必要があります。次に、ユーザーが編集する行の ID 値を取得する必要があります。

値を取得しようとしましたが、最初の行の id 値しか取得できないため、最初の行のみが更新されます。他の行の値を取得して、ユーザーがすべての行を更新できるようにする方法。

<script>
        $(function(){
    $('.table-cell').dblclick(function(){
//    if ($(this).attr('editing') == '0')
//    {
    // only trigger this when the cell is not in edit mode
   $(this).attr('editing',1);

    // show the input
    var input = $('<input type="text" value="'+$(this).html()+'">');
    $(this).html('');
    $(this).append(input);

    // bind blur event to input
    input.blur(function(){

        // update value from input to the table cell
        var value = $(this).val();
       // alert(value);
        $(this).parent().text(value);
        $(this).parent().attr('editing',0);
        //this will get only the first id value,no matter which column i edit
       var fid= document.getElementById("filename").textContent;
       // alert(fid);
       //this will iterate  
    $('#table').ready(function() { 
        $(this).find('.filename').each( function() { 
            alert($(this).html()); 
        }) 
    })




        // send the data to the server for update
        $.ajax({
            url: 'update',
            data: {text1:value,filename1:fid},
            type:"POST",
            dataType:"json",
            error:function(data){
               // alert('error')
            },
            success: function(data) {
                //alert('updated!')
            }
        });

    });
 //    }
});
    });
</script>
<table border="1" id="table">
 <th>S.NO</th>
 <th>Description</th>
 <th>File Name</th>
 <th>Category</th>
 <th>Sector</th>
 <th>Delete</th>
 <th>Edit</th>
 <c:forEach items="${fileDetails}" var="item" varStatus="counter">
 <tr>  
 <td>${counter.count}</td>
 <td onDblclick="javascript:doubleclick(this);" >${item.filedesc}</td> //editable row
 <td><a href="download?name=${item.filepath}" id="changes">${item.filenaame}</a></td>
 <td>${item.category}</td> 
 <td>${item.sector}</td>
 <td hidden="true" id="filename" class="filename" index="1" >${item.id}</td> //id values from db table
 <td> <input type="submit" onclick="filedelete('${item.id}','${item.sector}')" value="Delete"> </td>

 </tr>

 </c:forEach>
 <input type="hidden" name="delete" id="delete" >
 <input type="hidden" name="num" id="num">
 <input type="hidden" name="sect" id="sect">

 </table>
4

1 に答える 1

0

たとえば、次のように行の番号をエンコードできます。

<tr index="counter.index">

...そして、適切な場所でjQueryによってそれを取得するよりも

row=$(this).parent().attr("index")
于 2012-08-25T14:55:51.167 に答える