Question

首先，如果可能的话，我想在没有JQuery的情况下这样做，纯粹是Javascript。

好的，所以我有一个html表，行动态地添加到它。

每一行都是：

选择元素（id =“ddFields”）
文字输入元素（id =“tfValue”）
按钮元素（无ID）

Button元素删除它所在的行

选择元素的默认选项为“”，然后是其他“有效”选项

文本输入已添加到行中，但它已被隐藏。

所有元素都在同一个

基本上我希望选择元素显示隐藏文本输入元素，如果所选索引是！= 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');

   }
}

Answer 1

终于明白了。所以这就是：

<强>情景：一个动态添加行的表。

在每一行中都有一个select元素和一个输入文本元素。

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;
   }
}

希望这对任何人都有帮助。它困扰了我很长一段时间。谢谢shub的帮助！：）

Answer 2

首先，我希望你不要重复你的ids。没有两个项目具有相同的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(); }
});

请务必更改#tableid以匹配您的表格ID。

这假设文本输入是选择框之后的下一个元素。如果不是这样，请根据需要进行调整或询问，然后进行编辑。

获取表行中的元素

2 个答案: