Question

我的表单中有一个选项，如果用户回答是，则会显示一个divved区域。

但是我已经改变了我的布局等，因为我的表格处理统计数据，我以为我会在某些部分使用一些表格。

所以我想知道如何使用onchange函数将三个表行追加到表中。

但是getelementbyID仅适用于一个元素，因此只显示我的一行。

这是我到目前为止的代码：

 <table>
      <tr>
      <th>
    <select name="dosage" id="dosage" style="display:block;" onchange="document.getElementById('dosagearea').style.display = this.options.selectedIndex ? 'block' : 'none'">
     </th>
     </tr>


    <?php
//this code generates input fields using codeigntier
                                echo '<tr id="dosagearea">', '<td>', form_label('Emitted µmGy','dosage_emitted'), '</td>', '<td>', form_input ('dosage_emitted', set_value('dosage_emitted')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Absorbed mGy2','dosage_absorbed'), '</td>', '<td>', form_input ('dosage_absorbed', set_value('dosage_absorbed')) ,'</td>', '</tr>';
                                echo '<tr id="dosagearea">', '<td>', form_label('Dosage Period (mins)','dosage_time'), '</td>', '<td>', form_input ('dosage_time', set_value('dosage_period')), '</td>', '</tr>';
                        ?>

    </table>

有什么建议吗？

由于

Answer 1

你真的不想拥有同一个id的多个元素（id应该是唯一的）。你可以改用class。我的专业知识是使用jquery，这会使这一点变得轻而易举，但有些功能可以实现＆＃34; getelementbyclass＆＃34;你可以使用的行为

Answer 2

不要使用getElementById，请使用getElementByClassName，因为多个元素可以具有相同的类名。为了确保它在IE中有效，请添加：

document.getElementsByClassName = function(class_name)
{
    var all = this.getElementsByTagName('*');
    var matchArray = new Array();
    var re = new RegExp("(?:^|\\s)" + class_name + "(?:\\s|$)");
    for (var i = 0, l = all.length; i < l; i++)
    {
        if (re.test(all[i].className))
            matchArray.push(all[i]);
    }
    return matchArray;
}

Answer 3

    <select name="dosage" id="dosage" style="display:block;" onchange="toggleShowHide(this.options.selectedIndex, ['id1', 'id2', 'id3']);">

<script type="text/javascript">
function toggleShowHide(idx, arrIDs) {
    var display = idx ? 'block' : 'none';
    for(var x=0; x<arrIDs.length; x++)
        document.getElementById(arrIDs[x]).style.display = display;
}
</script>

如何使用onchange使多个表行显示/消失

3 个答案: