Create Array of Elements inserted in a table HTML Table

Question

Create Array of Elements inserted in a table HTML Table

Navigation

#1 by (4 votes)

0

I would like to know who could help me with this problem ... I have a table in which elements are inserted through check's box, from the inserted elements I want to create an Array with Javascript but my problem is that in the array it also introduces me the fields of the title of the table and a button that is at the bottom .... * Annex code

var tab=document.getElementById('ordenT');
var jsonArr=[];
for(var i=0; row<tab.rows[i]; i++)
{
  var col=row.cells;
  var jsonObj= { folio: col[0].innerHTML }
  jsonArr.push(jsonObj);
}
console.log(jsonArr);

//CODIGO HTML 
<table class="form_table"  id="ordenT" width="100%">
  <tr>
    <td style="text-align: center; background-color:  #fff0b3 !important">
                  <b>Órdenes de Trabajo.</b>
    </td>
  </tr>
  <tr> 
    <td style="text-align: center">
      <input type="button" class="button" id="txtIdTramite" name="txtIdTramite" value="ASIGNAR ORDENES DE TRABAJO" autofocus="autofocus" onclick="enviar();">
    </td>
  </tr>
</table>

javascript html5 html

asked by deorela cooper 01.12.2018 в 18:39

source

1 answer

SQL Count records that begin with xxx Can the client enter variables from his browser? (JavaScript)

score 4 · Answer 1

Several things:

The variable row of for does not exist, your variable condition loop is i
In this loop the stop condition must be tab.rows.length
row.cells gives you failure because row is undefined
Regarding the problem that you get all the rows. The best thing is that, on the one hand, remove the button from your table and on the other, for the header type the tag <th> instead of <td> and in the loop put a condition with indexOf() so that you do not get those rows with tag <th>

You should have something like this:

let tab=document.getElementById('ordenT');
let jsonArr=[];              
for(let i=0; i<tab.rows.length; i++){	
  if(tab.rows[i].innerHTML.indexOf("<th")<0){
    let col=tab.rows[i].cells;
    let jsonObj= { folio: col[0].innerHTML }
    jsonArr.push(jsonObj);
  }								
}
console.log(jsonArr);

//CODIGO HTML 

 <table class="form_table"  id="ordenT" width="100%">
    <thead>
         <th style="text-align: center; background-color:  #fff0b3 !important">
                      <b>Órdenes de Trabajo.</b>
        </th>
    </tr>
    <tr>
      <td>
        Dato 1
      </td>
    </tr>
    <tr>
      <td>
        Dato 2
      </td>
    </tr>
</table>
 <input type="button" class="button" id="txtIdTramite" name="txtIdTramite" value="ASIGNAR ORDENES DE TRABAJO" autofocus="autofocus" onclick="enviar();"></input>

PS: You will notice that instead of var I am using let . If your browser does not support let (Internet Explorer < 11) use var . Here you have more info.

Edit (with the button inside the table)

let tab=document.getElementById('ordenT');
    let jsonArr=[];              
    for(let i=0; i<tab.rows.length; i++){	
      if(tab.rows[i].innerHTML.indexOf("<th")<0 && tab.rows[i].innerHTML.indexOf("button") < 0){
        let col=tab.rows[i].cells;
        let jsonObj= { folio: col[0].innerHTML }
        jsonArr.push(jsonObj);
      }								
    }
    console.log(jsonArr);

<table class="form_table"  id="ordenT" width="100%">
        <thead>
             <th style="text-align: center; background-color:  #fff0b3 !important">
                          <b>Órdenes de Trabajo.</b>
            </th>
        </tr>
        <tr>
          <td>
            Dato 1
          </td>
        </tr>
        <tr>
          <td>
            Dato 2
          </td>
        </tr>
        <tr>
          <td style="text-align: center">
                 <input type="button" class="button" id="txtIdTramite" name="txtIdTramite" value="ASIGNAR ORDENES DE TRABAJO" autofocus="autofocus" onclick="enviar();"></input>
          </td>
        </tr>
    </table>