[英]Get data-field of above td cell
我有一个向表添加一行的按钮。 该表可在单击时进行编辑(类似于在此处找到的表: 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现在保存具有“ previous”数据字段的任何项目。 您可能需要做更多的DOM遍历才能完成您想要的操作。
让我知道您是否需要澄清。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.