Create TR table with automatic id Javascript

Question

Create TR table with automatic id Javascript

Navigation

#1 by (3 votes)
#2 by (2 votes)
#3 by (1 votes)

3

Hello, I have the following code:
My idea is that when calling this function insert a row in a table and to operate on it put an id to the TR, which I generate with the variable counter, the problem is that I have assigned the id ... but it does not take me value (the variable yes, but when assigning it not), if someone knows where the fault is ... Thank you!

<script>
    var contador=5;
    
    function createContact(){
            contador++;
            var mitabla = document.getElementById("tableContact");
        
            var elementos = mitabla.rows.length;
            var row =mitabla.insertRow(elementos);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            var cell6 = row.insertCell(5);
            var cell7 = row.insertCell(6);
            var cell8 = row.insertCell(7);
            
            cell1.innerHTML = '<tr id='contador'><input type="text" size="8" name="name" id="name" size="12">';
            cell2.innerHTML = '<input type="text" size="8" name="telef" id="telef" size="12">';
            cell3.innerHTML = '<input type="text" size="12" name="cargo" id="cargo" size="12">';
            cell4.innerHTML = '<input type="text" size="8" name="email" id="email"size="12">'; 
            cell5.innerHTML = '<input type="checkbox" name="emailC" id="emailC" value="1">';
            cell6.innerHTML = '<input type="text" size="10" name="usuario" id="usuario" size="12">';
            cell7.innerHTML = '<input type="text" name="coment" id="coment" size="12">';
            cell8.innerHTML = '<img onclick=modificarContacto(this); src="../graphics/edita1.jpg" height="20" width="20"><img onclick=eliminarContacto(this);  src="../graphics/delete12.jpg" height="20" width="20"><img onclick=saveContact(this);  src="../graphics/save123.jpg" height="20" width="20"></tr>';
           
                            }
                            </script>

javascript

asked by user80729 19.04.2018 в 11:27

source

3 answers

2

First this line

cell1.innerHTML = '<tr id='contador'><input type="text" size="8" name="name" id="name" size="12">';

is wrong here you do not have to put tr, since the row is being created with:

var row =mitabla.insertRow(elementos);

If you want to assign the id to the tr what you have to do is simply:

row.id = contador

I hope it serves you

Greetings.

answered by 19.04.2018 в 11:57

1

When you call the insertRow() function, it already creates the tr , so you do not need to add it to the next innerHTML.

When creating the row, using insertRow() you assign it to a variable, so you can assign it a id directly.

var contador=5;
    
    function createContact(){
            contador++;
            var mitabla = document.getElementById("tableContact");
        
            var elementos = mitabla.rows.length;
            var row =mitabla.insertRow(elementos);
            row.id = contador;
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            var cell6 = row.insertCell(5);
            var cell7 = row.insertCell(6);
            var cell8 = row.insertCell(7);
            
            cell1.innerHTML = '<input type="text" size="8" name="name" id="name" size="12">';
            cell2.innerHTML = '<input type="text" size="8" name="telef" id="telef" size="12">';
            cell3.innerHTML = '<input type="text" size="12" name="cargo" id="cargo" size="12">';
            cell4.innerHTML = '<input type="text" size="8" name="email" id="email"size="12">'; 
            cell5.innerHTML = '<input type="checkbox" name="emailC" id="emailC" value="1">';
            cell6.innerHTML = '<input type="text" size="10" name="usuario" id="usuario" size="12">';
            cell7.innerHTML = '<input type="text" name="coment" id="coment" size="12">';
            cell8.innerHTML = '<img onclick=modificarContacto(this); src="../graphics/edita1.jpg" height="20" width="20"><img onclick=eliminarContacto(this);  src="../graphics/delete12.jpg" height="20" width="20"><img onclick=saveContact(this);  src="../graphics/save123.jpg" height="20" width="20">';
            
            }

<table id="tableContact">

</table>

answered by 19.04.2018 в 11:36

Cube dice roll ignore syntax errors in javascript

score 3 · Accepted Answer

The problem is that you do not have to create the tr in cell1.innerHTML .

Remove that and assign the id to the row created with insertRow :

row.setAttribute("id", contador);

It would be something like this:

var row =mitabla.insertRow(elementos);   
            row.setAttribute("id", contador);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            var cell4 = row.insertCell(3);
            var cell5 = row.insertCell(4);
            var cell6 = row.insertCell(5);
            var cell7 = row.insertCell(6);
            var cell8 = row.insertCell(7);

            cell1.innerHTML = '<input type="text" size="8" name="name" id="name" size="12">';
            cell2.innerHTML = '<input type="text" size="8" name="telef" id="telef" size="12">';
            cell3.innerHTML = '<input type="text" size="12" name="cargo" id="cargo" size="12">';
            cell4.innerHTML = '<input type="text" size="8" name="email" id="email"size="12">'; 
...