Obteniendo valor de la celda de la tabla en JavaScript ... no en jQuery

No puedo creer cuánto tiempo me ha tomado esto, pero parece que no puedo encontrar la manera de extraer un valor de celda de una tabla HTML mientras recorro el tabla con JavaScript. Estoy utilizando el siguiente para repetir:Obteniendo valor de la celda de la tabla en JavaScript ... no en jQuery

var refTab=document.getElementById("ddReferences") 
    var ttl; 
    // Loop through all rows and columns of the table and popup alert with the value 
    // /content of each cell. 
    for (var i = 0; row = refTab.rows[i]; i++) { 
    row = refTab.rows[i]; 
    for (var j = 0; col = row.cells[j]; j++) { 
     alert(col.firstChild.nodeValue); 
    } 
    }

¿Cuál es la decisión correcta que debería estar poniendo en alerta a la() para mostrar el contenido de cada célula de mi tabla HTML? Esto debería estar en JS ... no puede usar jQuery.

Fuente

2010-06-18 GregH

¿Qué estás viendo? ¿Cómo se ve tu mesa? ¿Qué navegador? Copié tu código y lo ejecuté contra una tabla muy simple y pareció funcionar bien. –

¿Has probado innerHTML?

Me inclino a usar getElementsByTagName() para encontrar los elementos <tr>, y luego en cada uno para volver a llamar para encontrar los elementos <td>. Para obtener los contenidos, puede usar innerHTML o la variación apropiada (específica del navegador) en innerText.

Fuente

2010-06-18 18:45:10 Pointy

Si entiendo bien su pregunta, que busca innerHTML:

alert(col.firstChild.innerHTML);

Fuente

2010-06-18 18:45:36 Sarfraz

Unos pocos problemas:

El bucle condicional en el de afirmaciones es una misión, no una comprobación de bucle , por lo que podría ser un bucle infinito
Debe usar la función item() en esas colecciones de filas/celdas, no está seguro de si el índice de matriz funciona en th ose (en realidad no matrices JS)
Debe declarar los objetos row/col para asegurarse de que su alcance sea correcto.

Aquí es un ejemplo actualización:

var refTab=document.getElementById("ddReferences") 
var ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for (var i = 0; i<refTab.rows.length; i++) { 
    var row = refTab.rows.item(i); 
    for (var j = 0; j<row.cells.length; j++) { 
    var col = row.cells.item(j); 
    alert(col.firstChild.innerText); 
    } 
}

Reemplazar innerText con innerHTML si quieres HTML, no el contenido de texto.

Fuente

2010-06-18 18:49:00 David

Supongo que voy a responder mis propias preguntas ... Sarfraz estaba cerca pero no del todo bien. La respuesta correcta es:

alert(col.firstChild.value);

Fuente

2010-06-18 18:49:01 GregH

Lo siento, en realidad Safraz tenía razón. Tuve que agregar "firstChild" porque en mi código real tengo un elemento de entrada de texto en la celda, así que técnicamente tiene razón. – GregH

Si usted está buscando el contenido de la TD (celular), entonces sería simplemente: col.innerHTML

Es decir: alert(col.innerHTML);

A continuación, necesita analizar eso para cualquier valor que estés buscando.

Fuente

2010-06-18 18:49:37

El código que ha proporcionado funciona bien. Recuerde que si tiene su código en el encabezado, debe esperar a que se cargue primero el dom. En jQuery sería tan simple como poner su código en $(function(e){...});

En javascript normal use window.onLoad (..) o similar ... o tenga el script después de la defnición de la tabla (yuck!).El fragmento que ya ha proporcionado funciona muy bien cuando lo tengo de esa manera por lo siguiente:

<html> 
<head> 
    <meta http-equiv="content-type" content="text/html; charset=windows-1250"> 
    <meta name="generator" content="PSPad editor, www.pspad.com"> 
    <title></title> 
</head> 
<body> 
    <table id='ddReferences'> 
    <tr> 
     <td>dfsdf</td> 
     <td>sdfs</td> 
     <td>frtyr</td> 
     <td>hjhj</td> 
    </tr> 
    </table> 

<script> 
var refTab = document.getElementById("ddReferences") 
var ttl; 
// Loop through all rows and columns of the table and popup alert with the value 
// /content of each cell. 
for (var i = 0; row = refTab.rows[i]; i++) { 
    row = refTab.rows[i]; 
    for (var j = 0; col = row.cells[j]; j++) { 
     alert(col.firstChild.nodeValue); 
    } 
} 

</script> 
</body> 
</html>

Fuente

2010-06-18 18:52:44

function GetCellValues() { 
    var table = document.getElementById('mytable'); 
    for (var r = 0, n = table.rows.length; r < n; r++) { 
     for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { 
      alert(table.rows[r].cells[c].innerHTML); 
     } 
    } 
}

Fuente

2010-06-18 18:57:05 brendan

¡Perfecto! Muchas gracias. Obtuve el valor del cuadro de texto en una celda de la siguiente manera. var textboxVal = table.rows [r] .cells [c] .childNodes [0] .value; –

En realidad, la solución anterior no es perfecta. No se obtiene el valor en la celda, sino todo el conjunto de etiquetas formateadoras. – TomeeNS

el tipo anterior estaba cerca, pero aquí es lo que quiere:

 var table = document.getElementById(tableID); 
     var rowCount = table.rows.length;   
     for (var r = 0, n = table.rows.length; r < n; r++) { 
     for (var c = 0, m = table.rows[r].cells.length; c < m; c++) { 
      alert(table.rows[r].cells[c].firstChild.value); 
     } 
    } 
     }catch(e) { 
      alert(e); 
     }

Fuente

2014-05-20 13:34:45

confieren a continuación código

<html> 
<script> 


    function addRow(){ 
var table = document.getElementById('myTable'); 
//var row = document.getElementById("myTable"); 
var x = table.insertRow(0); 
var e =table.rows.length-1; 
var l =table.rows[e].cells.length; 
//x.innerHTML = "&nbsp;"; 
for (var c =0, m=l; c < m; c++) { 
table.rows[0].insertCell(c); 
    table.rows[0].cells[c].innerHTML = "&nbsp;&nbsp;"; 
} 

} 




function addColumn(){ 
     var table = document.getElementById('myTable'); 
     for (var r = 0, n = table.rows.length; r < n; r++) { 
       table.rows[r].insertCell(0); 
       table.rows[r].cells[0].innerHTML = "&nbsp;&nbsp;" ; 

     } 

    } 

function deleteRow() { 
    document.getElementById("myTable").deleteRow(0); 

} 

function deleteColumn() { 
    // var row = document.getElementById("myRow"); 
var table = document.getElementById('myTable'); 
for (var r = 0, n = table.rows.length; r < n; r++) { 
    table.rows[r].deleteCell(0);//var table handle 
} 
} 

</script> 
<body> 
<input type="button" value="row +" onClick="addRow()" border=0  style='cursor:hand'> 
    <input type="button" value="row -" onClick='deleteRow()' border=0 style='cursor:hand'> 
    <input type="button" value="column +" onClick="addColumn()" border=0 style='cursor:hand'> 
    <input type="button" value="column -" onClick='deleteColumn()' border=0 style='cursor:hand'> 

    <table id='myTable' border=1 cellpadding=0 cellspacing=0> 
<tr id='myRow'>   
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 
<tr>   
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    <td>&nbsp;</td> 
    </tr> 

    </table> 



</body> 
</html>

Fuente

2016-03-09 13:54:35

Trate de hacer esto: alerta (col.firstChild.data)

comprobarlo por la diferencia entre nodeValue y datos: When working with text nodes should I use the "data", "nodeValue", "textContent" or "wholeText" field?

Fuente

2017-07-25 12:57:25 KaliCharan

Obteniendo valor de la celda de la tabla en JavaScript ... no en jQuery

Respuesta

Cuestiones relacionadas