0

我有一个向表格添加一行的按钮。该表在点击时是可编辑的(类似于在此处找到的一个:http ://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html )但是,我得到了我的表数据从数据库。每个<td>都有一个与数据库中的字段名称对应的data-field属性。<td>'s现在,为了使添加的表格行像其他行一样可编辑,我需要在其正上方的单元格<td>'s data-field中标记 。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 + '"/>&nbsp;</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. 我想通过数据字段访问。有任何想法吗?

4

2 回答 2

0

有一个 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 遍历来做你想做的事。

如果您需要澄清,请告诉我。

于 2013-09-28T02:42:00.213 回答
0

您可以尝试以下方法:

var $th = $(this).closest('table').find('th').last().attr('data-field');

请记住,我根本没有尝试过,但是您想要做的是查找最后创建的<th>元素

于 2013-09-28T02:34:12.733 回答