0

まず、可能であれば、JQuery を使用せずに、純粋に Javascript でこれを行いたいと考えています。

わかりましたので、行が動的に追加されるhtmlテーブルがあります。

各行には次のものがあります。

  • 要素を選択 (id = "ddFields")
  • テキスト入力要素 (id = "tfValue")
  • ボタン要素 (ID なし)

Button 要素は、それが配置されている行を削除します

Select 要素には、デフォルトのオプション "" と、その他の「有効な」オプションがあります

テキスト入力が行に追加されますが、非表示になっています。

すべての要素が同じ

基本的に、選択したインデックスが != 0 の場合、選択要素に非表示のテキスト入力要素を表示したいと思います

これまでのところ、onchange関数にはこれがあります:

function itemChanged(dropdown) //called from itemChanged(this)
{ 
   var cell         = dropdown.parentNode;
   var row      = cell.parentNode;
   var rowIndex = dropdown.parentNode.parentNode.rowIndex;
   var index            = dropdown.selectedIndex;
   var option           = dropdown.options[dropdown.selectedIndex].text;

   if(index >0)
   {    
     alert(row);
     var obj=row.getElementById("tfValue"); //tfValue is the Text Field element
     alert(obj);
     //row.getElementById("tfValue").hidden = "false"; //doesn't work
     //row.getElementById("tfValue").setAttribute("hidden","true"); //doesn't work
   }
   else
   {
      alert('none selected');

   }
}
4

2 に答える 2

3

最後にそれを理解しました。だからここにあります：

シナリオ: 行が動的に追加されたテーブル。

各行には、選択要素と入力テキスト要素があります。

select 要素は、select 要素のインデックスに基づいて入力テキスト要素のテキスト値を変更します。

select 要素で onchange 関数を次のように設定します。

onchange="selectionChanged(this)"

次に、以下に示す JavaScript 関数を作成します。

function selectionChanged(dropdown)
{
   //get the currently selected index of the dropdown
   var index     = dropdown.selectedIndex;

   //get the cell in which your dropdown is
   var cell      = dropdown.parentNode;located

   //get the row of that cell
   var row       = cell.parentNode;

   //get the array of all cells in that row 
   var cells     = row.getElementsByTagName("td");

   //my text-field is in the second cell
   //get the first input element in the second cell
   var textfield = cells[1].getElementsByTagName("input")[0]; 

   //i use the first option of the dropdown as a default option with no value
   if(index > 0)  
   {
      textfield.value = "anything-you-want";
   }
   else
   {
      textfield.value = null;
   }
}

これが誰にでも役立つことを願っています。それは非常に長い間私を悩ませました。助けてくれてありがとう！:)

于 2013-02-16T09:11:08.753 に答える
1

まず、ID を繰り返していないことを願っています。2 つのアイテムが同じ ID を持つことはできません。

繰り返している場合は、id1、id2、id3 を作成します。

また、これは必須ではありませんが、次のように変数を導入することをお勧めします。

var a = x, 
    b = y,
    c = z;

jQuery を使用する場合は、次のようにします。

$('#tableid').on('click','button',function(){
    $(this).parent().parent().remove();
});

$('#tableid').on('change', 'select',function(){
    if($(this).val()){ $(this).next().show(); }
});

テーブルの ID と一致するように #tableid を変更してください。

これは、テキスト入力が選択ボックスの直後の要素であることを前提としています。そうでない場合は、必要に応じて調整するか、質問してください。編集します。

于 2013-02-15T17:24:13.180 に答える