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

次のようなものを試すことができます：

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

私はこれをまったく試していないことを覚えておいてください。しかし、あなたがしたいことは、最後に作成された<th>要素を探すことです

于 2013-09-28T02:34:12.733 に答える
0

CSS セレクターがあり、属性用の有効な jQuery セレクターもあります。次のように、これらのセレクターの 1 つをオンザフライで構築できます。

// 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 トラバーサルを行う必要があります。

説明が必要な場合はお知らせください。

于 2013-09-28T02:42:00.213 に答える