2010-06-18 13 views
34

Nie mogę uwierzyć, jak długo to trwało, ale nie mogę wymyślić, jak wyodrębnić wartość komórki z tabeli HTML, jak I iteracji przez tabela z JavaScript. Używam następujące iteracyjne:Uzyskiwanie wartości z komórki tabeli w JavaScript ... nie 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); 
    } 
    } 

Jaka jest prawidłowa rozmowa Byłbym wprowadzenie do alert() zadzwonić do wyświetlania zawartości każdej komórki mojego tabeli HTML? Powinno to być w JS ... nie można używać jQuery.

+0

Co widzisz? Jak wygląda twój stół? Jaka przeglądarka? Skopiowałem twój kod i przetestowałem go na bardzo prostym stole i wydawało mi się, że działa dobrze. –

Odpowiedz

0

Czy próbowałeś już innerHTML?

Byłbym skłonny użyć getElementsByTagName(), aby znaleźć elementy <tr>, a następnie na każdym z nich, aby wywołać je ponownie, aby znaleźć elementy <td>. Aby uzyskać zawartość, możesz użyć innerHTML lub odpowiedniej (specyficznej dla przeglądarki) odmiany na innerText.

1

Jeśli dobrze rozumiem pytanie, szukasz innerHTML:

alert(col.firstChild.innerHTML); 
0

kilka problemów:

  • Pętla warunkowego w swojej do stwierdzeń jest zadanie, a nie kontrola pętli , więc może nieskończenie pętla

  • Powinieneś użyć funkcji item() w tych kolekcjach wierszy/komórek, nie wiesz, czy indeks tablicy działa na th ose (w rzeczywistości nie tablice JS)

  • Należy zadeklarować obiekty wiersza/col, aby upewnić się, że ich zakres jest poprawny.

Oto zaktualizowana przykład:

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

Wymień innerText z innerHTML jeśli chcesz HTML, a nie treści tekstowych.

0

Zgadnij, odpowiem na własne pytania ... Sarfraz był blisko, ale nie do końca. Prawidłowa odpowiedź brzmi:

alert(col.firstChild.value); 
+0

Przepraszam, w rzeczywistości Safraz miał rację. Musiałem dodać "firstChild", ponieważ w moim rzeczywistym kodzie mam element wprowadzania tekstu w komórce, więc technicznie ma rację. – GregH

1

Jeśli szukasz zawartości TD (komórkę), to byłoby po prostu: col.innerHTML

Ie: alert(col.innerHTML);

Będziesz wtedy trzeba przeanalizuj to dla dowolnych wartości, których szukasz.

1

Podany kod działa poprawnie. Pamiętaj, że jeśli masz kod w nagłówku, musisz poczekać, aż dom zostanie załadowany jako pierwszy. W jQuery byłoby po prostu tak proste, jak umieszczenie kodu wewnątrz $(function(e){...});

W normalnym javascript użyj window.onLoad (..) lub tym podobne ... lub po skryptu po definicji tabeli (fuj!).Fragment, który podałeś działa poprawnie, gdy mam go w ten sposób za:

<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> 
58
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); 
     } 
    } 
} 
+2

Idealnie! Wielkie dzięki. Mam wartość pola tekstowego w komórce w następujący sposób. var textboxVal = table.rows [r] .cells [c] .childNodes [0] .value; –

+0

W rzeczywistości powyższe rozwiązanie nie jest idealne. Nie dostaniesz wartości w komórce, ale także całą masę znaczników formujących. – TomeeNS

0

wyżej facet był blisko, ale tutaj jest to, co chcesz:

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

przyznają poniższy kod


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

Powiązane problemy