我有一个按钮，可以在表格中添加一行。该表可在单击时编辑（类似于此处找到的表格：http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html）但是，我从数据库中获取表数据。每个<td>都有一个 data-field 属性，该属性与数据库中的<td>'s字段名称进行响应。现在，为了使添加的表格行像其他行一样可编辑，我需要用其正上方单元格中的data-field标记<td>'s data-field。我已经尝试了几种不同的方法，但仍然不足。这是我的添加行脚本：
<script type="text/javascript">
/*
Add a new table row to the bottom of the table
*/
$(document).ready(function()
{
$(".add").click(function()
{
$("#table").each(function()
{
var $table = $(this);
var id=$('#table tr:last').attr('id');
var $tr = $("#table").children('tr');
var $th = $(this).closest('table').find('th').eq($(this).index());
// Number of td's in the last table row
var n = $('tr:last td', this).length;
var tds = '<tr class="edit_tr" id="' + id++ + '">';
for(var i = 0; i < n; i++)
{
tds += '<td class="edit_td"><input type="text" class="editbox" id="' +
id + '" data-field="' + $th + '"/> </td>';
console.log($th);
}
tds += '</tr>';
//console.log(tds);
if($('tbody', this).length > 0)
{
$('tbody', this).append(tds);
}else {
$(this).append(tds);
}
});
});
});
</script>
现在，请注意var $th = $(this).closest('table').find('th').eq($(this).index());。这是我得到的最接近的。但是，我不想通过th访问。我想按数据字段访问。有什么想法吗？
你可以尝试这样的事情：
var $th = $(this).closest('table').find('th').last().attr('data-field');
请记住，我根本没有尝试过这个，但你想做的是寻找最后创建的<th>元素
有一个CSS选择器，还有一个有效的jQuery属性选择器。您可以像这样动态构建这些选择器之一：
// Find the value of the field you're looking for
var currentDataField = $('#table tr:last [data-field]').data('field');
// Construct a selector using that
var previous = currentDataField - 1;
var previousSelector = '[data-field=' + previous + ']';
var $previous = $(previousSelector);
$previous现在保存具有"上一个"数据字段的任何项。您可能需要执行更多的 DOM 遍历才能执行所需的操作。
如果您需要澄清，请告诉我。