2016-11-01 13 views
-1

は、列の固定数の行の可変数を持つ表があるとし、各行があまりにもボタンがあるとし、今私はのは、この選択した列がテキストエリアであるとしましょう(たとえば、列の値を選択するようにしたいので、私はそれがコンテンツのSELECT )その行のボタンがクリックされたとき。 enter image description hereテーブル内の任意の列の任意の列をHTMLで取得するにはどうすればよいですか?

は、上記画像における例えばIは、対応する行の「TEXTAREA」のすべてのデータよりも押され送信した場合、変数に格納されるべきであることを望みます。

+0

を実行します。何か試しましたか? –

答えて

2

あなたは、クリックされたボタンに近い要素を見つけるために、jQueryのclosest()機能を使用することができます。ボタンにクリックハンドラを追加し、次に上に移動してtextareaを見つけます。

$('.button').on("click",function(){ 
    var thisRowsTA = $(this).closest("textarea"); 
    console.log($(thisRowsTA).val()); 
}); 
+0

私は '$(document).ready(function(){ \t $("#button1 ")をクリックしました(\t \t var thisRowsTA = $(this).closest( '#hiii')。私は複数の「ボタン」と同じ名前の「textbutton」を持っているので..それはそうです。最初のボタンでのみ機能します。なぜ他の人には分からないのですか? – Vimal

+1

これは、IDを使用しているため、私の例のようにクラスを使用する必要があります。 – TheValyreanGroup

+0

うわー、それはあなたの作品です..:D – Vimal

1

A単純な方法であると:txt_area_1、txt_area_2、txt_area_3:

のように、あなたのテキストエリアにIDパターンを置きます。 次に、ボタンのクリックイベントで、その行に対応するテキストエリアをキャッチします。これを行うには、IDパターンを使用します。

さらに詳しいヘルプコードを投稿してください。

+0

私はそうと、私はそれに対応するテキストエリアでボタンを一致させる方法ボタンをクリックしてください?(画像を参照) – Vimal

+0

あなたもあなたのボタンのIDパターンを入れて、それに対応するテキストエリアを見つけるためにそれを使用することができます。しかし、このテーブルを動的に生成する場合は、行番号(例:txt_area_#rownumber#)を使用してテキストエリアIDを作成し、その行のボタンのクリック機能で使用してください。 @O_Zは答えたので、DOM構造に依存しないでください。変更される可能性があります。一意のIDに依存します。 –

+0

ええ、ボタンをクリックすると、どうすればその '#rownumber'を知ることができますか? – Vimal

1

ボタンごとにイベントハンドラを広告する必要があります。その中にこのようなものを書くことができます。

function eventHandler(e){ 
    var row = this; // start at the button 

    while(row.nodeName != 'TR' && row.parent){ 
     // go up till we find the row 
     row = row.parent; 
    } 


    var textArea = row.querySelector('textarea'); 
    var value = textArea.value; 
    // do something with supplied feedback. 
} 

ハンドラを接続するには、次のようにします。

function attachTableEvents(){ 
    var table = document.querySelector('table'); // or more specific selector if needed 
    var buttons = table.querySelectorAll('button'); 
    for (var i = buttons.length; i--;){ 
     buttons[i].addEventListener(eventHandler); 
    } 
} 
1

DOM構造のカウントは実際には悪いです。

私は行番号を保持している私のコントロールで属性を置きます。要素をクリックすると、要素の種類とプロパティの値でDOMを簡単にクエリでき、この行の要素を取得できます。

後で、DIV Sまたは変化構造に変更した場合、あなたの意志はまだので、 `button`要素にイベントハンドラをアタッチし、関連する` textarea`を見つけるために、DOMのトラバーサルを使用し、正しく

関連する問題