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和hide / show函数，以及我用来显示它的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);
}

显示隐藏动态生成的文本框，其中包含动态创建的选择字段的更改

1 个答案: