我创建了一个用户可以编辑每一行的表，但问题是，当我点击编辑时，字段没有变化，而且它没有获得表中每行的文本值，只有3个字段用户可以编辑自己而不是转到另一个页面，所以我在这里做了一个按钮并得到该行中每列的文本值并转换为文本字段
以下是我的代码希望任何人都可以帮助我
/usr/local/Cellar/portaudio/19.6.0/include$(document).on('click', '.edit_row', function() {
var id = $(this).attr('data-id');
var field1 = $('fielda'+id).text();
var field2 = $('fieldb'+id).text();
var field3 = $('fieldc'+id).text();
console.log(field1);
var textField1 = "<input type='text' class='vala"+id+"' value='"+field1+"' />";
var textField2 = "<input type='text' class='valb"+id+"' value='"+field2+"' />";
var textField3 = "<input type='text' class='valc"+id+"' value='"+field3+"' />";
$('fielda'+id).html(textField1);
$('fieldb'+id).html(textField2);
$('fieldc'+id).html(textField3);
$('.inf_act'+id).html("<a class='btn btn-default pull-right mleft5 btn-icon save_row' data-id='"+id+"'><i class='fa fa-check'></i>Save</a><a class='btn btn-default pull-right mleft5 btn-icon cancel_row' data-id='"+id+"'><i class='fa fa-times'></i>Cancel</a>");
});
$(document).on('click', '.cancel_row', function() {
var id = $(this).attr('data-id');
var field1 = $('vala'+id).val();
var field2 = $('valb'+id).val();
var field3 = $('valc'+id).val();
$('fielda'+id).html(field1);
$('fieldb'+id).html(field2);
$('fieldc'+id).html(field3);
$('.inf_act'+id).html("<a href='#'><i class='fa fa-upload'></i>Upload</a><a class='btn btn-default pull-right mleft5 btn-icon edit_row' data-id='"+id+"'><i class='fa fa-pencil-square-o'></i>Edit</a>");
});a {
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0 5px;
}
答案 0 :(得分：1)
将您的所有$('fielda'+id)更改为$(this).closest("tr").find('.fielda'+id)（其他字段等）
同时更改了在单击save_row时取消时要调用的保存事件 - 当前没有取消处理程序。
$(document).on('click', '.edit_row', function() {
var id = $(this).attr('data-id');
var field1 = $(this).closest("tr").find('.fielda'+id).text();
var field2 = $(this).closest("tr").find('.fieldb'+id).text();
var field3 = $(this).closest("tr").find('.fieldc'+id).text();
console.log(field1);
var textField1 = "<input type='text' class='vala"+id+"' value='"+field1+"' />";
var textField2 = "<input type='text' class='valb"+id+"' value='"+field2+"' />";
var textField3 = "<input type='text' class='valc"+id+"' value='"+field3+"' />";
$(this).closest("tr").find('.fielda'+id).html(textField1);
$(this).closest("tr").find('.fieldb'+id).html(textField2);
$(this).closest("tr").find('.fieldc'+id).html(textField3);
$(this).closest("tr").find('.inf_act'+id).html("<a class='btn btn-default pull-right mleft5 btn-icon save_row' data-id='"+id+"'><i class='fa fa-check'></i>Save</a><a class='btn btn-default pull-right mleft5 btn-icon cancel_row' data-id='"+id+"'><i class='fa fa-times'></i>Cancel</a>");
});
$(document).on('click', '.save_row', function() {
var id = $(this).attr('data-id');
var field1 = $(this).closest("tr").find('.vala'+id).val();
var field2 = $(this).closest("tr").find('.valb'+id).val();
var field3 = $(this).closest("tr").find('.valc'+id).val();
$(this).closest("tr").find('.fielda'+id).html(field1);
$(this).closest("tr").find('.fieldb'+id).html(field2);
$(this).closest("tr").find('.fieldc'+id).html(field3);
$(this).closest("tr").find('.inf_act'+id).html("<a href='#'><i class='fa fa-upload'></i>Upload</a><a class='btn btn-default pull-right mleft5 btn-icon edit_row' data-id='"+id+"'><i class='fa fa-pencil-square-o'></i>Edit</a>");
});a {
cursor: pointer;
display: inline-block;
font-weight: bold;
padding: 0 5px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table ">
<thead>
<tr>
<th> </th>
<th>EVENTO</th>
<th>Entro DATA</th>
<th>RESPONSABILE</th>
<th>COMMENTI</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr class="edRow1">
<td><input type="checkbox" name="idData[]" /></td>
<td>Inoltdo gara</td>
<td class="fielda1">16-Jun</td>
<td class="fieldb1">Arianna</td>
<td class="fieldc1">Risposta entdo il 23/6</td>
<td class="inf_act1"><a href="#"><i class="fa fa-upload"></i>Upload</a>
<a class="btn btn-default pull-right mleft5 btn-icon edit_row" data-id="1"><i class="fa fa-pencil-square-o"></i>Edit</a>
</td>
</tr>
<tr class="edRow2">
<td><input type="checkbox" name="idData[]" /></td>
<td>Inoltdo gara</td>
<td class="fielda2">16-Jun</td>
<td class="fieldb2">Arianna</td>
<td class="fieldc2">Risposta entdo il 23/6</td>
<td class="inf_act2"><a href="#"><i class="fa fa-upload"></i>Upload</a>
<a class="btn btn-default pull-right mleft5 btn-icon edit_row" data-id="2"><i class="fa fa-pencil-square-o"></i>Edit</a>
</td>
</tr>
<tr class="edRow3">
<td><input type="checkbox" name="idData[]" /></td>
<td>Inoltdo gara</td>
<td class="fielda3">16-Jun</td>
<td class="fieldb3">Arianna</td>
<td class="fieldc3">Risposta entdo il 23/6</td>
<td class="inf_act3"><a href="#"><i class="fa fa-upload"></i>Upload</a>
<a class="btn btn-default pull-right mleft5 btn-icon edit_row" data-id="3"><i class="fa fa-pencil-square-o"></i>Edit</a>
</td>
</tr>
<tr class="edRow4">
<td><input type="checkbox" name="idData[]" /></td>
<td>Inoltdo gara</td>
<td class="fielda4">16-Jun</td>
<td class="fieldb4">Arianna</td>
<td class="fieldc4">Risposta entdo il 23/6</td>
<td class="inf_act4"><a href="#"><i class="fa fa-upload"></i>Upload</a>
<a class="btn btn-default pull-right mleft5 btn-icon edit_row" data-id="4"><i class="fa fa-pencil-square-o"></i>Edit</a>
</td>
</tr>
<tr class="edRow5">
<td><input type="checkbox" name="idData[]" /></td>
<td>Inoltdo gara</td>
<td class="fielda5">16-Jun</td>
<td class="fieldb5">Arianna</td>
<td class="fieldc5">Risposta entdo il 23/6</td>
<td class="inf_act5"><a href="#"><i class="fa fa-upload"></i>Upload</a>
<a class="btn btn-default pull-right mleft5 btn-icon edit_row" data-id="5"><i class="fa fa-pencil-square-o"></i>Edit</a>
</td>
</tr>
</tbody>
</table>