Lấy giá trị từ ô bảng trong JavaScript ... không phải jQuery

Tôi không thể tin được điều này đã mất bao lâu nhưng tôi dường như không tìm ra cách trích xuất một giá trị ô từ bảng HTML khi tôi lặp qua bảng với JavaScript. Tôi đang sử dụng những điều sau đây để lặp lại:Lấy giá trị từ ô bảng trong JavaScript ... không phải 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ộc gọi chính xác mà tôi nên đặt vào cuộc gọi alert() để hiển thị nội dung của mỗi ô trong bảng HTML của tôi là gì? Điều này cần được trong JS ... không thể sử dụng jQuery.

Nguồn

2010-06-18 GregH

là bạn nhìn thấy gì? Bàn của bạn trông như thế nào? Trình duyệt nào? Tôi đã sao chép mã của bạn và chạy nó trên một bảng rất đơn giản và nó có vẻ hoạt động tốt. –

Bạn đã thử innerHTML chưa?

Tôi muốn sử dụng getElementsByTagName() để tìm các yếu tố <tr> và sau đó gọi lại một lần nữa để tìm các yếu tố <td>. Để nhận nội dung, bạn có thể sử dụng innerHTML hoặc biến thể thích hợp (theo trình duyệt cụ thể) trên innerText.

Nguồn

2010-06-18 18:45:10 Pointy

Nếu tôi hiểu câu hỏi của bạn một cách chính xác, bạn đang tìm kiếm innerHTML:

alert(col.firstChild.innerHTML);

Nguồn

2010-06-18 18:45:36 Sarfraz

Một vài vấn đề:

Vòng lặp có điều kiện trong của bạn cho câu là một nhiệm vụ, không phải là một kiểm tra vòng lặp , do đó, vòng lặp vô hạn có thể là
Bạn nên sử dụng hàm item() trên các bộ sưu tập hàng/ô đó, không chắc chắn nếu chỉ mục mảng hoạt động trên ose (không thực sự là các mảng JS)
Bạn nên khai báo các đối tượng hàng/col để đảm bảo phạm vi của chúng là chính xác.

Dưới đây là một ví dụ Cập nhật:

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

Thay innerText với innerHTML nếu bạn muốn HTML, không phải là nội dung văn bản.

Nguồn

2010-06-18 18:49:00 David

Đoán tôi sẽ trả lời câu hỏi của riêng tôi .... Sarfraz đã gần nhưng không hoàn toàn đúng. Câu trả lời đúng là:

alert(col.firstChild.value);

Nguồn

2010-06-18 18:49:01 GregH

Xin lỗi, thực ra Safraz đã đúng. Tôi đã phải thêm "firstChild" bởi vì trong mã thực tế của tôi, tôi có một yếu tố đầu vào văn bản trong tế bào vì vậy về mặt kỹ thuật, ông là đúng. – GregH

Nếu bạn đang tìm kiếm các nội dung của TD (cell), sau đó nó sẽ chỉ đơn giản là: col.innerHTML

Ie: alert(col.innerHTML);

Sau đó, bạn sẽ cần phải phân tích cú pháp đó cho bất kỳ giá trị nào bạn đang tìm kiếm.

Nguồn

2010-06-18 18:49:37

Mã yo đã cung cấp chạy tốt. Hãy nhớ rằng nếu bạn có mã của bạn trong tiêu đề, bạn cần phải chờ cho dom được tải đầu tiên. Trong jQuery, nó sẽ đơn giản như việc đặt mã của bạn bên trong $(function(e){...});

Trong cửa sổ sử dụng javascript bình thường.onLoad (..) hoặc tương tự ... hoặc có tập lệnh sau khi bảng defnition (yuck!).Đoạn mà bạn cung cấp chạy tốt khi tôi có nó theo cách đó sau:

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

Nguồn

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

Nguồn

2010-06-18 18:57:05 brendan

Hoàn hảo! Cảm ơn rất nhiều. Tôi nhận giá trị hộp văn bản trong một ô như sau. var textboxVal = table.rows [r] .cells [c] .childNodes [0] .value; –

Thực ra, giải pháp trên không hoàn hảo. Bạn không nhận được giá trị trong tế bào nhưng toàn bộ bó của các thẻ định dạng là tốt. – TomeeNS

anh chàng ở trên là gần nhưng đây là những gì bạn muốn:

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

Nguồn

2014-05-20 13:34:45

trao mã dưới đây

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

Nguồn

2016-03-09 13:54:35

Hãy thử điều này: alert (col.firstChild.data)

Kiểm tra này ra cho sự khác biệt giữa nodeValue và dữ liệu: When working with text nodes should I use the "data", "nodeValue", "textContent" or "wholeText" field?

Nguồn

2017-07-25 12:57:25 KaliCharan

Lấy giá trị từ ô bảng trong JavaScript ... không phải jQuery

Trả lời

Các vấn đề liên quan