如何指定在同一行的另一個元素在表中使用jQuery

我試圖使用jQuery挑在錶行中的項目，這將使同一行如何指定在同一行的另一個元素在表中使用jQuery

<table> 
<tr id="t1"><td><input type="checkbox" id="t1" value="" /></td></tr> 
<tr id="t2"><td><input type="checkbox" id="t2" value="" /></td>{want new stuff here}</tr> 
</table>

內的變化這個實例 - 如果我選擇ID爲2的複選框 - 我希望在最後一列之後添加/添加新列，並且如果未勾選相同的複選框，它將刪除剛剛添加的內容。任何人都可以建議如何做到這一點？

來源

2012-01-13 Zabs

標記是語法錯誤，因爲'id'屬性值必須是唯一的（與違反本法導致嚴重的問題）。您需要修改標記。 – 2012-01-13 13:57:25

請說明：應該添加一個新列，還是隻添加一個新單元？如果一列，其他行應該發生什麼？如果一個單元格，你是否考慮過改變表格的含義，所以它的結構不符合HTML規則（不同行數的不同槽數）？通過刪除添加的內容，是否將單元格內容設置爲空或刪除單元格？ – 2012-01-13 14:01:12

確保您id值上的所有元素唯一的，那麼你可以使用.parents("tr")：

$(".mytable tr :checkbox").click(function() { 
    var checked = $(this).is(":checked"), 
     $tr  = $(this).parents("tr").first(); 

    if (checked) { 
     $tr.append("<td></td>"); 
    } else { 
     $tr.find("td:last").remove(); 
    } 
});

如果您要添加多個<td>的，然後對它們進行存儲的參考或使用的標識符找到他們再次。我假設你只是想在最後添加/刪除一列。

與任何jQuery一樣，有多種解決方案！這是我頭頂的那個。

來源

2012-01-13 13:58:50 kamranicus

輝煌@subkamran - 我會給出一個裂縫！ :) – Zabs 2012-01-13 14:00:45

我更新了第一個選擇器，以附加到您表中的所有複選框。如果您只想要特定複選框（按課程或其他方式），請調整該片段。 – kamranicus 2012-01-13 14:01:50

一個快速的編寫例子見this jsFiddle

$(function(){ 
    $("#t2").find("input").click(function(){ 
      if($(this).is(":checked")){ 
       $(this).parents('tr').append("<td class='t2-add'>have new stuff</td>") 
      } 
      else{ 
       $(this).parents('tr').find('.t2-add').remove() 
      } 
     }) 
})

來源

2012-01-13 14:05:33 Grooveek

嘗試類似如下：

$('[type="checkbox"]').change(function() { 
    var $this = $(this); 

    if ($this.is(':checked') { 
     $this.closest('tr').append('<td></td>'); 
    } else { 
     $this.closest('tr').children('td:last-child').remove(); 
    } 
});

它使用了jQuery .closest(selector)方法。

來源

2012-01-13 14:07:50

哇..真棒回覆傢伙！我將不會再嘗試其中的一種，但是我已經在這一頁上學到了很多，已經再次感謝了！ :) – Zabs 2012-01-13 14:31:35

我最好將動態內容插入到指定的TD單元中，而不是創建和刪除td容器，這樣您就不必關心正確的colspans。

$('#table :checkbox').change(function() { 
    var cont = $(this).closest('tr').find('.content'); 
    if ($(this).is(':checked')) { 
     cont.append('Some content'); 
    } 
    else { 
     cont.empty(); 
    } 
});

檢查了這一點： http://jsfiddle.net/sCjXg/1/

來源

2012-01-13 14:18:12 dfsq

如何指定在同一行的另一個元素在表中使用jQuery

回答

相關問題