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

时间:2012-08-25 10:15:57

标签: javascript jquery ajax jsp servlets

在过去的两天里使用jquery iam尝试通过ajax.i调用servlet来获取执行更新所需的单元格值使用双击事件将文本框替换为用于编辑值的单元格文本框失去焦点,值传递给servlet.i需要传递已编辑的值以及用于更新table的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>

1 个答案:

答案 0 :(得分:0)

您可以对行的编号进行编码,例如:

<tr index="counter.index">

...而不是通过jQuery在适当的地方抓住它

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