在jQuery中使用上下文和「this」

我正在處理一個項目，該項目要求我在單擊另一個表中的等效行時可以編輯表中的單元格。我遇到的問題是，我無法讓它在可更新表中使單行變爲可編輯，而是使每行的每個單元都可編輯。在jQuery中使用上下文和「this」

這裏是的jsfiddle演示該問題的示例：http://jsfiddle.net/z9qtH/24/

在此示例中，如果你點擊表格中的「第1行」在頂部，該表的第一行下面應該有它的單元格的內容換成投入。相反，底部表格中的兩行都可以編輯。

代碼

HTML：

<table border="1"> 
<tr> 
    <td class="editable">Row 1</td> 
</tr> 
<tr> 
    <td>Row 2</td> 
</tr> 
</table> 

<table class="updateable" border="1"> 
    <tr> 
     <td>1 - 1</td> 
     <td>1 - 2</td> 
     <td>1 - 3</td> 
    </tr> 
    <tr> 
     <td>2 - 1</td> 
     <td>2 - 2</td> 
     <td>2 - 3</td> 
    </tr> 
</table>

的Javascript：

function replaceRowCellContentsWithInput(row) { 
    $("td", row).each(function() { 
     $(this).html('<input type="text" value="' + $(this).html() + '" />'); 
    }); 
} 

$(document).ready(function() { 
    $("td.editable").click(function() { 
     var cell = $(this); 
     var rowIndex = cell.parent().index(); 
     var table = $("table.updateable"); 

     replaceRowCellContentsWithInput(table.children(rowIndex)); 
    }); 
});

來源

2011-07-28 Jason

實時鏈接對於一個問題來說是一個很好的*附件*，但也總是在問題*中發佈相關的代碼*。兩個原因。 1.人們不應該遵循鏈接來幫助你。 2. StackOverflow不僅適用於您，而且適用於將來也有類似問題的其他人。外部鏈接可以被移動，修改，刪除等。通過確保相關代碼在問題中，我們確保問題（及其答案）在合理的時間段內保持有用。 –

你的線：table.children(rowIndex)選擇（可能thead）和tbody元件。即使它們沒有出現在您的HTML中，瀏覽器也會插入一個tbody。

如果用（例如）$('tr', table)[rowIndex]替換它，那麼您確定實際上是在表中選擇行。

來源

2011-07-28 11:42:59

嘗試replaceWith（）...

剛剛修改爲每UR要求 ... ....

function replaceRowCellContentsWithInput(row) { 
     $("td", row).each(function() { 
      $(this).replaceWith('<input type="text" value="' + $(this).html() + '" />'); 
     }); 
    }

http://jsfiddle.net/z9qtH/24/

來源

2011-07-28 11:41:03 K6t

你的問題是，在這個特殊的選擇：

table.children(rowIndex)

兒童返回直接子 - 爲<table>這是<tbody>。

所以，當你使用這個作爲上下文時，無論你點擊了哪一行，你的循環都會在你的表中每擊中<td>。

來源

2011-07-28 11:43:06 Henry

在jQuery中使用上下文和「this」

回答

相關問題