Question

这是整个代码

<html>
<head>
<title> Add/Remove dynamic rows in html table </title>
</head>
<body>  
<label><input type="checkbox" id='checkboxId'>N/A</label>   
<br>
<div id="div-table-id">
    <table id='table-id' border="1">
        <tr>
            <th>Subject</th>
            <th>Section Code</th>
            <th>Room</th>
            <th>Days</th>
            <th>Start Time</th>
            <th>End Time</th>
            <th>Hours Per Week</th>
            <th>No of Students (A)</th>
            <th>Course Credit w/o multiplier(B)</th>
            <th>Student Credit Units (AxB)</th>
            <th>Teaching Load Credits with Multiplier</th>
            <th>Delete?</th>
        </tr>
        <tr>
            <td>
                <select name="subject" >
                    <option value="cmsc2">CMSC2</option>
                    <option value="cmsc11" selected="selected">CMSC11</option>
                    <option value="cmsc121">CMSC121</option>
                </select>
            </td>
            <td><input type="text" id="password" value="sample"/></td>
            <td><input type="text" id="password2" value="sample"/></td>
            <td>
                <input type="checkbox" name="days" value="m" checked>M
                <input type="checkbox" name="days" value="t">T
                <input type="checkbox" name="days" value="m">W
                <input type="checkbox" name="days" value="th">Th
                <input type="checkbox" name="days" value="f">F
                <input type="checkbox" name="days" value="s">S
            </td>
            <td><input type="time" name="start_time"></td>
            <td><input type="time" name="end_time"></td>
            <td><input type="number" name="hpw"></td>   
            <td><input type="number" name="nos"></td>
            <td><input type="number" name="ccm"></td>
            <td><input type="number" name="scu"></td>
            <td><input type="number" name="tlcm"></td>
            <td><input type="checkbox" name="chk"></td>
        </tr>
    </table>
    <input type="button" value="Add Row" onclick="addRow('table-id')" />
    <input type="button" value="Delete Row" onclick="deleteRow('table-id')"/>       
    <input type="button" value="Save"/>

</div>

<script type="text/javascript">
    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);
            newcell.innerHTML=table.rows[1].cells[i].innerHTML;

            resetChildren( newcell );
        }
    }

    function resetChildren( parentEl ){
        var len = parentEl.childNodes.length,
            i = 0,
            el;

        for(i = 0; i < len; i++){

            el = parentEl.childNodes[i];

            console.log( i, el.type, el );

            switch( el.type ){
                case "text":
                    el.value = "";
                    break;
                case "checkbox":
                    el.removeAttribute('checked');
                    break;
                case "select-one":
                    el.selectedIndex = 0;
                    break;
                case "number":
                    el.value = '';
                    break;
            }
        }
    }
    function deleteRow(tableID) {
        try {
        var table = document.getElementById(tableID);
        var rowCount = table.rows.length;
        var colCount = table.rows[0].cells.length;

        for(var i=0; i<rowCount; i++) {
            var row = table.rows[i];
            var chkbox = row.cells[colCount-1].childNodes[0];
            if(null != chkbox && true == chkbox.checked) {
                if(rowCount <= 2) {
                    alert("Cannot delete all the rows.");
                    break;
                }
                table.deleteRow(i);
                rowCount--;
                i--;
            } 
        }
        }catch(e) {
            alert(e);
        }
    }
    document.getElementById('checkboxId').onchange = function () {
        var elems = document.getElementById('div-table-id').querySelectorAll('input,select,textarea');
        if (document.getElementById('checkboxId').checked) {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = true;
            }
        } else {
            for (var i = 0; i < elems.length; i++) {
                elems[i].disabled = false;

            }    
        }
    }
    document.getElementById('password2').disabled = true;
    document.getElementById('password').onblur = function(){
        if(document.getElementById('password').value != '')
            document.getElementById('password2').disabled = false;
        else{
            document.getElementById('password2').value = '';
            document.getElementById('password2').disabled = true;
        }
        document.getElementById("password2").select();
    }
    document.getElementById('password2').onblur = function (){
        if(document.getElementById('password').value == '')
            return;
        check();
    }

    function check() {
        if (document.getElementById('password2').value != document.getElementById('password').value) {
            alert('The two passwords must match.');
            document.getElementById("password").select();
            document.getElementById('password2').value = '';
        }
        else 
            alert('The two passwords matched.');
    }
</script>
</body>
</html>

现在，我有一个功能，当我选中该框时，禁用所有输入字段。

另外，我想要输入字段＆＃39; 禁用后重置的值。

包括新添加的。当我取消选中时，只需再次使用空字段启用所有字段。

我该怎么做？

Answer 1

这可以用jquery实现。

我已经设置了一个jsfiddle。找到jsfiddle。

$('.Disable').change( function() {
var isChecked = this.checked;

if(isChecked) {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",true);
   $('.textbox').val('');
} else {
    $(this).parents("tr:eq(0)").find(".textbox").prop("disabled",false);
}

}）;

它可以满足您的要求。您所要做的就是在代码中实现这一点。

Answer 2

您需要做的是首先将所有内容放在表单中

 <form name="myForm"> 

   <script>
    function uncheck(var x)
    {
        document.getElementById("myForm").reset();
        if((document.getElementById(x).checked == true)
        document.getElementById(x).checked = false;

}

 </script>

Answer 3

禁用之前，只需插入此代码段..

switch( elems[i].type ){
    case "text":
        elems[i].value = "";
        break;
    case "checkbox":
        elems[i].removeAttribute('checked');
        break;
    case "select-one":
        elems[i].selectedIndex = 0;
        break;
    case "number":
        elems[i].value = '';
        break;
}

当使用javascript选中复选框时，重置来自字段的所有输入

3 个答案: