php - 使用动态创建的选择字段的 onchange 显示隐藏动态生成的文本框

Question

我想使用 MySQL、PHP、JS 和 HTML 动态生成如下表:

___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
    Add Row         Delete Row

所以第一列是一个用于删除行的复选框。 第二列是从数据库动态填充的选择框 第三列默认隐藏，选中“其他”时显示，不选中“其他”时隐藏。 因此，当按下“添加行”时，它将如下所示:

___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
___________________________________________
[] |   Please Select Service  |  Text Box |
-------------------------------------------
    Add Row         Delete Row

我的问题是我只能隐藏/显示第一个文本框，除非在按下“添加行”时第一个文本框已经显示，如果发生这种情况，新文本框将显示但不能隐藏， “添加行”和“删除行”按钮的功能与其名称状态相同。我猜它与选择字段中最后一个选项元素关联的值有关。

可以在下面看到 addRow、deleteRow 和隐藏/显示函数的代码片段，以及我用来显示它的 HTML。

JS

var boxCount = 1;
    function addRow(tableID) {

        var table = document.getElementById(tableID);

        var rowCount = table.rows.length;
        var row = table.insertRow(rowCount);

        var colCount = table.rows[0].cells.length;

        for(var i=0; i<colCount; i++) {

            var newcell = row.insertCell(i);

            var theSelect = document.getElementById('services');
            var lastValue = theSelect.options[theSelect.options.length - 1].value;

            newcell.innerHTML = table.rows[0].cells[i].innerHTML;
            switch(newcell.childNodes[0].type) {
                case "text":
                        newcell.childNodes[0].value = "";
                        newcell.childNodes[0].id = "otherService" + boxCount;
                        break;
                case "checkbox":
                        newcell.childNodes[0].checked = false;
                        break;
                case "select-one":
                        newcell.childNodes[0].selectedIndex = 0;
                        newcell.childNodes[0].options[lastValue].value = boxCount;
                        break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[0].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 1) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            }


        }
        }catch(e) {
            alert(e);
        }
    }

    function hideShowOtherBox(e) {
        var theSelect = document.getElementById('services');
        var lastValue = theSelect.options[theSelect.options.length - 1].value;
        var ele = 'otherService' + lastValue;

        if (e.options[e.selectedIndex].text == "Other") {
            if (document.getElementById(ele).style.display == "none") {
                document.getElementById(ele).style.display = "block";
            }
        } else {
            document.getElementById(ele).style.display = "none";
        }
    }

HTML

<table id="dataTable" width="350px" border="1">
    <tr>
        <td><input type="checkbox" name="chk[]"/></td>
        <td>
            <select id='services' name="services[]" onChange='hideShowOtherBox(this);'>
                <option value="Select">Please Select</option>
                <?php
                    $servicesList = getAllServices();
                    foreach($servicesList as $x) {
                        echo "<option value='$x'>$x</option>\n";
                    }
                ?>
                <option value='0'>Other</option>
            </select>
        </td>
        <td><input id='otherService0' style='display:none;' type="text" name="otherService[]"/></td>
    </tr>
</table>
<input type="button" value="Add Row" onclick="addRow('dataTable')" />

<input type="button" value="Delete Row" onclick="deleteRow('dataTable')" />

Answer 1

试试这个:

var boxCount = 1;

function addRow(tableID) {
    var table = document.getElementById(tableID);

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
}