Question

我的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' 应删除每个人行

Answer 1

您编写了一个名为DeleteRow的函数，但您在click事件中调用了delRow（this）。因为你得到错误。

Answer 2

试试这个

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

Answer 3

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

<table>
<tr>
<td>
<table><tr><!--your row data--><td></td></tr></table>
</td>
</tr>
</table>

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

3 个答案: