How to add and remove lines from a html table

Question

I have the table:

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

This table is formatted to be printed and used online. Online, I wish to put buttons to add and remove those lines with input tags above the header. Is not complicate to format the html, but I was thinking about removing and adding tr lines using xml javascript capabilities, but don't know exactly how...

Edit: I don't get what so wrong with this question that is getting negative. Whatever... I'm working in this code:

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

The problem seams to be appendChild is not good, I should go deep in HTMLTableElement, I guess, that's what I like to choose the better approach first... If I could make it work, I'll answer myself, I don't mind you don't like it, it's a free world, right?

[CSS Print media](https://developer.mozilla.org/en-US/docs/Web/CSS/@media) — epascarello, May 20 '14 at 18:46
I was thinking about the concept of how to do it (before write code), never mind, I'll remove the post if is not good... — Gustavo, May 20 '14 at 18:47
Possible duplicate of [How to insert row in HTML table body in javascript?](http://stackoverflow.com/questions/18333427/how-to-insert-row-in-html-table-body-in-javascript), and an SO answer about [deleting rows](http://stackoverflow.com/a/14343896/1169519). — Teemu, May 20 '14 at 18:58
Almost. I'll have to remove the last one, the contents is more complex, I have to enumerate the input names, etc.. But I'll investigate the methods and the HTMLTableElement - might be a better approach than just Element. — Gustavo, May 20 '14 at 19:02

score 0 · Answer 1 · answered May 20 '14 at 22:07

It seams HTMLTableElement is the best approach for inserting and deleting rows. HTMLTableElement.insertRow creates a row linked with the original object. Here is the same code with HTMLTableElement corrections needed:

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

I think working with the cells and inputs as string were easier in this case - I'd pick a sample (as below) and add a number replacing {n} by a numbering:

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

This way, every the information will have an unique name.

How to add and remove lines from a html table

1 Answers1