獲取上述td單元格的數據字段

Question

我有一個向表格添加行的按鈕。該表可編輯點擊（類似於這裏發現的一個：http://www.9lessons.info/2011/03/live-table-edit-with-jquery-and-ajax.html） 但是，我從數據庫中獲取我的表數據。每個<td>都有一個data-field屬性，該屬性與數據庫中的<td>'s字段名稱對應。現在，爲了讓添加的表格行可以像其他行一樣進行編輯，我需要在其正上方的單元格中標記<td>'sdata-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訪問。我想通過數據字段訪問。有任何想法嗎？

Answer 1

你可以嘗試這樣的：

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

記住我沒試過所有，但你會想要做的是尋找最後創建<th>元素

Answer 2

有一個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);

$以前現在擁有的一切項具有「以前的」數據字段。你可能需要做更多的DOM遍歷來做你想做的事情。

讓我知道你是否需要澄清。