2

MySQL、PHP、JS、およびHTMLを使用して、次のようなテーブルを動的に生成したいと考えています。

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

したがって、最初の列は行の削除に使用されるチェックボックスです。2番目の列は、データベースから動的に入力される選択ボックスです。3番目の列はデフォルトで非表示になり、「その他」が選択されている場合は非表示になり、「その他」が選択されていない場合は非表示になります。したがって、「行の追加」を押すと、次のようになります。

___________________________________________
[] |   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')" />
4

1 に答える 1

0

これを試して：

var boxCount = 1;

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

    var rowCount = table.rows.length;
    var row = table.insertRow(rowCount);
}
于 2013-10-28T16:20:30.297 に答える