个人中心
gpt4 book ai didi

javascript - 使用javascript在html中动态添加/删除行

转载 作者：行者123 更新时间：2023-11-30 12:43:07 25 4
gpt4 key购买 nike

我有这个特定的片段..

newcell.innerHTML = table.rows[0].cells[i].innerHTML;
//alert(newcell.childNodes);
switch(newcell.childNodes[0].type) {
case "text":
    newcell.childNodes[0].value = "";
    break;
case "checkbox":
    newcell.childNodes[0].checked = false;
    break;
case "select-one":
    newcell.childNodes[0].selectedIndex = 0;
    break;
case "number":
    newcell.childNodes[0].value = '';
    break;
}

上面的开关使新添加的行重置复制行的值。

文本和数字重置。

但是下拉框和复选框没有

这两个需要什么命令来重置它们的值？对于下拉菜单，第一个选项和复选框是没有复选框被选中

编辑:这是整个代码

<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;
            switch(newcell.childNodes[0].type) {
                case "text":
                    newcell.childNodes[0].value = "";
                    break;
                case "checkbox":
                    newcell.childNodes[0].checked = false;
                    break;
                case "select-one":
                    newcell.childNodes[0].selectedIndex = 0;
                    break;
                case "number":
                    newcell.childNodes[0].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);
        }
    }
</script>
<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>
    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>

最佳答案

好的，我知道你的问题是什么。当您像这样将新表格单元格的内容分配为第一行的内容时

newcell.innerHTML=table.rows[1].cells[i].innerHTML;

您有时会在输入/选择元素周围复制一些空白，这些空白会成为文本节点。因此，对于第一个 TD 中的 SELECT 元素，您的 DOM 实际上看起来像这样:

  • [0] #文本节点
  • [1] 选择
  • [2] #文本节点

这意味着当您抓取第一个子节点 newcell.childNodes[0] 时，您抓取了 Text 节点并且 SELECT 或 CHECKBOX 保持不变。我重写了您的代码，包括一个将重置新单元格的所有子单元的函数，因为这也涵盖了有人在您用来追加新行的第一行中选中更多复选框的情况。

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;
        }
    }
}

关于javascript - 使用javascript在html中动态添加/删除行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/23644129/

25 4 0
文章推荐： c# - 如何从父实例实例化子实例
文章推荐： ios - 以编程方式向单元格添加单独数量的按钮
文章推荐： c# - 为什么额外的异步操作使我的代码比操作根本没有发生时更快？
文章推荐： javascript - ajax 意外标记 *
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com