在过去 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>