javascript 获取表格行中的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14897788/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Get An Element Within a Table Row
提问by Craig Wayne
Firstly, If possible, I would like to do this without JQuery, and purely Javascript.
首先，如果可能的话，我想在没有 JQuery 和纯 Javascript 的情况下做到这一点。
Ok so I have an html table with rows getting added dynamically to it.
好的，所以我有一个 html 表，其中的行被动态添加到其中。
In each row is a:
每行是一个：
- Select Element (id = "ddFields")
- Text Input Element (id = "tfValue")
- Button Element (no id)
- 选择元素（id =“ddFields”）
- 文本输入元素 (id = "tfValue")
- 按钮元素（无 id）
The Button Element removes the row for which it is situated
按钮元素删除它所在的行
The Select Element has a default option of "" and then other 'valid' options
选择元素有一个默认选项“”，然后是其他“有效”选项
The Text Input is added to the row but it is hidden.
文本输入被添加到行中，但它是隐藏的。
All elements are in the same
所有元素都在同一个
Basically I would like for the Select Element to show the hidden text input element if the selected index is != 0
基本上，如果所选索引为 != 0，我希望 Select Element 显示隐藏的文本输入元素
so far I have this for my onchange function:
到目前为止，我的 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');
}
}
回答by Craig Wayne
Finally figured it out. So here it is:
终于想通了。所以这里是：
SCENARIO:A table that has rows added to it dynamically.
场景：动态添加行的表。
In each row there is a select element and an input text element.
在每一行中有一个选择元素和一个输入文本元素。
The select element changes text-value of the input text element based on the index of the select element.
select 元素根据 select 元素的索引更改输入文本元素的 text-value。
in your select element set the onchange function to this:
在您的选择元素中，将 onchange 函数设置为：
onchange="selectionChanged(this)"
then create a javascript function shown below:
然后创建一个如下所示的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;
}
}
Hope this helps whoever. It bugged me for a very long time. Thanks shub for the help! :)
希望这对任何人都有帮助。它困扰了我很长时间。感谢 shub 的帮助！:)
回答by shubniggurath
first, I hope you are not repeating your ids. No two items should have the same id.
首先，我希望你不要重复你的id。任何两个项目都不应具有相同的 ID。
If you're iterating, create id1, id2, id3.
如果您正在迭代，请创建 id1、id2、id3。
Also, this is not necessary but I suggest introducing your vars like this:
此外，这不是必需的，但我建议像这样介绍你的 vars：
var a = x,
b = y,
c = z;
If you decide to use jQuery you could just do this:
如果您决定使用 jQuery，您可以这样做：
$('#tableid').on('click','button',function(){
$(this).parent().parent().remove();
});
$('#tableid').on('change', 'select',function(){
if($(this).val()){ $(this).next().show(); }
});
Be sure to change #tableid to match your table's id.
请务必更改 #tableid 以匹配您的表的 ID。
This assumes the text input is the very next element after the select box. If not so, adjust as necessary or ask and I'll edit.
这假设文本输入是选择框之后的下一个元素。如果不是这样，请根据需要进行调整或询问，我会进行编辑。
