如何在此表佈局中查找文本框的值？

Question

我想在同一行單擊按鈕時獲取colB中的文本框的值。 但是，我的選擇器沒有到達那裏。此外，它必須在IE8中工作。

fiddle

<table> 
    <thead> 
     <tr> 
      <th>&nbsp;</th> 
      <th>colA</th> 
      <th>colB</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
      <td> <a class=btn class=foo>foo</a> 

      </td> 
      <td> 
       <input type=text value=1 /> 
      </td> 
      <td> 
       <input type=text value=2 /> 
      </td> 
     </tr> 
     <tr> 
      <td> <a class=btn class=foo>foo</a> 

      </td> 
      <td> 
       <input type=text value=3 /> 
      </td> 
      <td> 
       <input type=text value=4 /> 
      </td> 
     </tr> 
    </tbody> 
</table> 


$('.foo').on('click', function (item, evt) { 
    var foo = $(evt.target); 
    var tr = btn.parent().parent(); 
    var col3 = tr.children(':eq(2)'); 
    var txt = col3.find('input'); 
    alert(txt.val()); 
}); 

Answer 1

我建議：

$('.foo').on('click', function() { 
    var btn = $(this), 
     tr = btn.closest('tr'), 
     col3 = tr.find('td').eq(2), 
     txt = col3.find('input'); 

    alert(txt.val()); 
}); 

JS Fiddle demo。

注意，這需要一些修正HTML：

<td> 
    <a class='btn foo'>foo</a>  
</td> 

您有一個多class屬性（只能有一個），每個都有一個（不帶引號）類名（這是有效的，報價是可選，但只有如果只有一個值）。

而且，你使用：

var foo = $(evt.target); 

內on()方法是似乎沒有迭代器（這是有道理的，因爲它可以在一個元件上一次只作用），因此，事件對象是你的地方item，並且沒有evt被傳遞，所以選擇器是一個null對象。

並以下列：

var tr = btn.parent().parent(); 

你從來沒有定義btn變量，所以它不能被用來尋找祖先（S）。

參考文獻：

• closest()。

Answer 2

而不是這樣做使用jQuery代碼，爲什麼你不分配一個id到與該行相關的按鈕。當它被點擊時，抓住相應列的文本框值，會讓它變得簡單得多。另外，您分配類和類型的方式也不正確。他們需要用引號括起來。多個類也不需要多個類屬性，所以按鈕類應該是class =「btn foo」，而不是class =「btn」class =「foo」。

例如：

<tbody> 
    <tr> 
     <td> <a id="col1" class="btn foo">foo</a> 

     </td> 
     <td> 
      <input id="col1_input1" type="text" value=1 /> 
     </td> 
     <td> 
      <input id="col1_input2" type="text" value=2 /> 
     </td> 
    </tr> 

等