Javascript 如何在html表中添加和删除行

我有一张桌子：

<table id="form_Dependentes" width="100%" cellpadding="0" cellspacing="0" class="form">
        <tr>
            <th colspan="4" valign="middle" scope="col">Dependentes</th>
            </tr>
        <tr>
            <td colspan="2"><label>Nome</label><input type="text" name="depNome_01" maxlength="128" /></td>
            <td width="20%"><label>Parentesco</label><input type="text" name="depParentesco_01" maxlength="16" /></td>
            <td width="20%"><label>Data Nasc.</label><input type="text" name="depDataNasc_01" maxlength="10" /></td>
        </tr>
        <tr>
            <td colspan="2"><label>Nome</label><input type="text" name="depNome_02" maxlength="128" /></td>
            <td width="20%"><label>Parentesco</label><input type="text" name="depParentesco_02" maxlength="16" /></td>
            <td width="20%"><label>Data Nasc.</label><input type="text" name="depDataNasc_02" maxlength="10" /></td>
        </tr>
... etc.
</table>

家属
诺姆
Parentesco
数据Nasc。
诺姆
Parentesco
数据Nasc。
... 等

此表的格式为在线打印和使用。联机时，我希望使用按钮添加和删除标题上方带有输入标记的行。格式化html并不复杂，但我正在考虑使用XMLJavaScript功能删除和添加tr行，但不知道具体如何

编辑：我不明白这个问题有什么错，它变得消极了。无论什么我的工作代码如下：

var cadFormTableRow;
var cadFormTable;
function cadFormAtivar(){
    document.getElementById("form_FotoUpload").innerHTML = 'Foto (máximo 1MB): <input name="foto" type="file" accept="image/*;capture=camera">';
    document.getElementById("form_Assinatura").innerHTML = '';
    document.getElementById("form_Dados").innerHTML = 'Dependentes: <button type="button" onclick="cadFormDep(1);"> + </button> <button type="button" onclick="cadFormDep(-1);"> - </button><br /><button type="button" onclick="cadFormTestar();">Enviar</button>';
    cadFormTable = document.getElementById("form_Dependentes");
    var nr = cadFormTable.rows.length;
    cadFormTableRow = cadFormTable.rows[1];
    console.log("Rows: "+nr);
    //console.log("Row: "+cadFormTableRow.outerHTML);
    for(i=0; i<nr-1; i++){
        cadFormTable.deleteRow(1);
    }
}
function cadFormDep(a){
    if(a>0){
        cadFormTable.appendChild(cadFormTableRow);
    } else {
        var nr = cadFormTable.rows.length;
        cadFormTable.deleteRow(nr-1);
    }
}

var-cadFormTableRow；
var表格；
函数cadFormAtivar（）{
document.getElementById（“form_FotoUpload”）.innerHTML='Foto（máximo 1MB）：'；
document.getElementById（“form_Assinatura”）.innerHTML=''；
document.getElementById（“form_Dados”）.innerHTML='Dependentes:+-
Enviar'；
cadFormTable=document.getElementById（“表单依赖项”）；
var nr=cadFormTable.rows.length；
cadFormTableRow=cadFormTable.rows[1]；
控制台日志（“行：+nr）；
//日志（“行：+cadFormTableRow.outerHTML”）；
对于（i=0；i0）{
cadFormTable.appendChild（cadFormTableRow）；
}否则{
var nr=cadFormTable.rows.length；
cadFormTable.deleteRow（nr-1）；
}
}

---

要成为appendChild的问题不好，我应该深入研究HTMLTableElement，我想，这就是我喜欢首先选择更好的方法的原因。。。如果我能让它工作，我会回答自己，我不介意你不喜欢它，这是一个自由的世界，对吗？

它是插入和删除行的最佳方法。HTMLTableElement.insertRow创建与原始对象链接的行。以下是需要进行HTMLTableElement更正的相同代码：

var cadFormTableRow;
var cadFormTable;
function cadFormAtivar(){
    document.getElementById("form_FotoUpload").innerHTML = 'Foto (máximo 1MB): <input name="foto" type="file" accept="image/*;capture=camera">';
    document.getElementById("form_Assinatura").innerHTML = '';
    document.getElementById("form_Dados").innerHTML = 'Dependentes: <button type="button" onclick="cadFormDep(1);"> + </button> <button type="button" onclick="cadFormDep(-1);"> - </button><br /><button type="button" onclick="cadFormTestar();">Enviar</button>';
    cadFormTable = document.getElementById("form_Dependentes");
    var nr = cadFormTable.rows.length;
    cadFormTableRow = cadFormTable.rows[1];
    for(i=0; i<nr-1; i++){
        cadFormTable.deleteRow(1);
    }
}
function cadFormDep(a){
    if(a>0){
        var row = cadFormTable.insertRow(-1);
        var html = cadFormTableRow.innerHTML.replace(/{n}/g, String(cadFormTable.rows.length-1));
        row.innerHTML = html;
        console.log("Row: "+html);
    } else {
        var nr = cadFormTable.rows.length;
        cadFormTable.deleteRow(nr-1);
    }
}

var-cadFormTableRow；
var表格；
函数cadFormAtivar（）{
document.getElementById（“form_FotoUpload”）.innerHTML='Foto（máximo 1MB）：'；
document.getElementById（“form_Assinatura”）.innerHTML=''；
document.getElementById（“form_Dados”）.innerHTML='Dependentes:+-
Enviar'；
cadFormTable=document.getElementById（“表单依赖项”）；
var nr=cadFormTable.rows.length；
cadFormTableRow=cadFormTable.rows[1]；
对于（i=0；i0）{
var行=cadFormTable.insertRow（-1）；
var html=cadFormTableRow.innerHTML.replace（/{n}/g，字符串（cadFormTable.rows.length-1））；
row.innerHTML=html；
log（“行：+html”）；
}否则{
var nr=cadFormTable.rows.length；
cadFormTable.deleteRow（nr-1）；
}
}

我认为在这种情况下，将单元格和输入用作字符串更容易——我会选择一个示例（如下所示），然后添加一个数字，用编号替换{n}：

<tr>
            <td colspan="2"><label>Nome</label><input type="text" name="depNome_{n}" maxlength="128" /></td>
            <td width="20%"><label>Parentesco</label><input type="text" name="depParentesco_{n}" maxlength="16" /></td>
            <td width="20%"><label>Data Nasc.</label><input type="text" name="depDataNasc_{n}" maxlength="10" /></td>
        </tr>

诺姆
Parentesco
数据Nasc。

---

这样，每个信息都将有一个唯一的名称。

您尝试过什么吗？可能是重复的。。。。事实上有很多…线条意味着什么？边界还是表行？我在考虑如何做的概念（在编写代码之前），没关系，如果不好，我会删除帖子。。。