如何使用添加和删除按钮动态添加表以及动态添加行

How to dynamically add tables along with dynamic addition of rows using add and delete buttons for both?

本文关键字：动态 添加 添加行 按钮 何使用 删除      更新时间：2023-09-26

我的JAVASCRIPT代码

var a1=0;
var count=1;
function addRow(data)
    {
        var table = document.getElementById('student');
        var rowCount = table.rows.length;
        var col = table.rows[2].cells.length;
        var del = (data.id);
        var row = table.insertRow(rowCount);
        for(i=0;i<col;i++)
        {
            var newcell = row.insertCell(i);
            newcell.innerHTML = table.rows[2].cells[i].innerHTML; 
        }       
    }
function addst(data)
  {
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var row =  table.insertRow(rowCount);
    row.innerHTML = '&nbsp;';
    for(i=0;i<3;i++)
        {   
            var row = table.insertRow(rowCount+i+1);
            row.innerHTML = table.rows[i].innerHTML;    
            if(i==0)
            {
                row.id="st"+a1+"";
            }
        }       
    count++;
}
function delRow(data) 
{
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
        var p=data.parentNode.parentNode;
        p.parentNode.removeChild(p);
}
function delst(data)
{
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var p = document.getElementById(eq01);
    table.removeChild(p);
}

我的HTML代码

<fieldset>
<legend align="center">Student Information</legend> 
<br>
<table id="student">
    <tr id="s1">        
        <th><select name="" width="250px"> 
        <option value="" selected align="center">student Type</option>
        <option value="">male</option>
        <option value="">female</option>
        </select></th>
        <th><input type="button" value="+" onclick="addst(this)"/>
        <th><input type="button" value="-" onclick="delst(this)"/>
    </tr>
    <tr id="label">
        <th align="left">class info</th>
        <th align="left">Math</th>
        <th align="left">Phy</th>
        <th align="left">Chem</th>
        <th align="left">Total</th>
        <th align="left">Average</th>   
    </tr>
    <tr id="c1">
        <td>
            <select> 
                <option value="" selected>Select your class</option>
                <option>8</option>
                <option>9</option>
                <option>10</option>
                <option>11</option>
            </select>
        </td>
        <td><input type="text" id="val02" size="16" name="math" placeholder="Math marks"/></td>
        <td><input type="text" id="val03" size="16" name="phy" placeholder="Phy marks"/></td>
        <td><input type="text" id="val04" size="16" name="chem" placeholder="Chem marks"/></td>
        <td><input type="text" id="val06" size="16" name="total" placeholder="Total marks"/></td>
        <td><input type="text" id="val07" size="16" name="avg" placeholder="Average marks"/></td>
        <th><input type="button" value="+"  id="r1" onclick="addRow(this)" /></th>          
        <th><input type="button" value="-"  id="r1" onclick="delRow(this)" /></th>
    </tr>
</TABLE>
</fieldset>

'addst'和'addRow'函数正在工作，但不知道如何编写删除函数。。。。你们能帮我搞定吗

'delst'应删除所有相应的学生信息，而'delRow'则应删除每个单独的行

您已经编写了一个名为DeleteRow的函数，但您在click事件中调用了delRow（this）。正因为如此，你才会犯错。

像这样尝试

function delst(data)
{ 
    var table = document.getElementById('student');
    var rowCount = table.rows.length;
    var p=data.parentNode.parentNode;
    p.parentNode.removeChild(p);
}

请将每个数据绑定到单独的表中，然后尝试删除行下的表。删除父子元素将很容易。示例：

<table>
<tr>
<td>
<table><tr><!--your row data--><td></td></tr></table>
</td>
</tr>
</table>
相关文章：