获取表格行中的元素

Question

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

好的，所以我有一个 html 表格，其中的行被动态添加到其中。

每一行都有一个：

• 选择元素 (id = "ddFields")
• 文本输入元素 (id = "tfValue")
• 按钮元素（无 id）

按钮元素删除它所在的行

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

文本输入已添加到该行，但它是隐藏的。

所有元素都在同一个

基本上，如果所选索引为 != 0，我希望 Select Element 显示隐藏的文本输入元素

到目前为止，我的 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元素的索引改变输入文本元素的text-value。

在您的选择元素中将 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;
   }
}

希望这对任何人都有帮助。它困扰了我很长时间。感谢舒布的帮助！ :)

Answer 2

首先，我希望你不要重复你的身份。没有两个项目应该有相同的 id。

如果您正在迭代，请创建 id1、id2、id3。

另外，这不是必需的，但我建议像这样引入你的 var：

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。

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