使用 ajax post 传递单元格值以更新表

Question

在过去 2 天使用 jquery，我试图通过 ajax 调用 servlet 来获取执行更新所需的单元格值。我使用双击事件将单元格替换为文本框以编辑值，当文本框失去焦点，值被传递给 servlet。我需要传递编辑后的值以及用于更新表的 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>

Answer 1

您可以像这样对行号进行编码：

<tr index="counter.index">

...然后通过 jQuery 在适当的位置获取它

row=$(this).parent().attr("index")