2010-12-06 15 views
0

tds(テキストボックス)にユニークなidが必要なので、それらのテキストボックスに入力された値を取得できます。テキストボックスにユニークなIDを与え、これらのテキストボックスに入力された値を取得するにはどうすればよいですか?ここで子要素のJquery変更ID

は私のコードです:

<html> 
<head> 

<script type="text/javascript" src="jquery-1.3.2.min.js"></script> 

<style type="text/css"> 
    div{ 
     padding:4px; 
    } 
</style> 

</head> 

<body> 


<script type="text/javascript"> 

$(document).ready(
    function(){ 
    var counter = 2; 
     $('a.add').live('click', 
      function(){ 
       if(counter>5){ 
        alert("Only 5 textboxes allowed"); 
        return false; 
       } 
      $(this) 
       .closest('tr') 
       .clone() 
       .appendTo('table'); 
      $(this) 
       .text('Remove') 
       .removeClass('add') 
       .addClass('remove'); 
      counter++; 
      }); 
     $('a.remove').live('click', 
      function(){ 
       $(this) 
        .closest('tr') 
        .remove(); 
        counter--; 
      }); 
     $('input:text').each(
      function(){ 
       var thisName = $(this).attr('name'), 
        thisRrow = $(this) 
           .closest('tr') 
           .index(); 
       //$(this).attr('name', 'row' + thisRow + thisName); 
       // $(this).attr('id', 'row' + thisRow + thisName); 
      }); 
    $("#getButtonValue").click(function() { 
     var msg = ''; 
     for(i=1; i<counter; i++){ 
      msg += $('').val(); 
     } 
       alert(msg); 
     }); 
    }); 
</script> 
</head><body> 

<table> 
    <tr> 
     <th>Min Value</th> 
     <th>Max Value</th> 
    </tr> 
    <tr> 
     <td><input type="text" name="col1" id="col1" /></td> 
     <td><input type="text" name="col2" id="col2" /></td> 
     <td><a href="#" class="add">Add</a></td> 
    </tr> 
    <tr><input type='button' value='Get TextBox Value' id='getButtonValue'></tr> 
</table> 
</body> 
</html> 
+0

は何ですか? –

+0

これらのテキストボックスに入力された値を取得することができます。また、テキストボックスには固有のIDが必要です。 –

答えて

1

使用この新しい行を作成...あなたの質問や問題が

 var newRow = 
      $(this) 
       .closest('tr') 
       .clone() 
       .appendTo('table'); 
     var i=1; 
     $('input',newRow).each(function(){ 
      $(this)[0].id="Col"+counter+"_"+(i++)} 
     ); 
0

固有のIDを使用してページにあなたの<input>ボックスのそれぞれを与えるために:

 var i=0; 
     $('input').each(function(){ 
      $(this)[0].id="TextBox"+(i++)} 
     ); 

これは彼らにTextBox0TextBox1などのIDを与えるだろう...

しかし、あなたのHTMLに投稿されたすべての入力ボックスには、既に一意のIDがあることがわかりました。実行時に動的に追加する予定ですか?

+0

idsはユニークではありません.1つのtrに対してユニークですが、次のtrでその繰り返しが繰り返されます。 –

+0

私は理解できません。 'text '型の2つの' 'があります。一つは 'id =" col1 "'で、もう一つは 'id =" col2 "'です。繰り返されたIDはどこにありますか? –

+0

ああ、申し訳ありません、私は今理解しています! :) –

1

あなたは、そのテキストボックスにIDを割り当てる必要があり、新しい行を追加する場合:

var i=0; 
$(this) 
    .closest('tr') 
    .clone() 
    .appendTo('table') 
    .children() 
    .each(function(){ 
     $(this)[i].id="textbox" + counter + (i++)} 

をI行第2列を識別する第1の番号とIDを選択しました。

+0

上記と同じ問題はありません。 –

+0

+1 'counter'と'(i ++) '連結の間に区切り文字(アンダースコアなど)を追加する方が安全です。 OPのシナリオではほとんど起こりそうにありませんが。 「counter == 1」、「i == 11」、「counter == 11」、「i == 1」のようなものでしょうか? –

+0

あなたは丁寧に教えてください –