Question

我有桌子：

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

此表格式化为可在线打印和使用。在线，我希望按钮添加和删除标题上方带有输入标记的那些行。格式化html并不复杂，但我正在考虑使用xml javascript功能删除和添加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);
    }
}

问题接缝是appendChild不好，我应该深入研究HTMLTableElement，我想，我喜欢先选择更好的方法...如果我能让它工作，我会＃39我会回答自己，我不介意你不喜欢它，它是一个自由的世界，对吗？

Answer 1

接缝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);
    }
}

我认为在这种情况下使用单元格和输入作为字符串更容易 - 我会选择一个示例（如下所示）并添加一个用编号替换{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>

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

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

1 个答案: