[英]How to access the contents of a cell in HTML table using the cell id?
我已經使用JavaScript函數insertRow（）和insertCell（）函數在HTML中創建了一個表。 我已經為每個單元分配了一個ID。 我想獲取JavaScript中單元格的值/內容。
以下是用於創建表的代碼：
<HTML>
<HEAD>
<SCRIPT language="javascript">
function addRow(tableID) {
var table = document.getElementById(tableID);
var rowCount = table.rows.length;
var row = table.insertRow(rowCount);
row.id = rowCount;
var cell1 = row.insertCell(0);
cell1.id = rowCount + 'a';
cell1.innerHTML = "CELL1";
var cell2 = row.insertCell(1);
cell2.id = rowCount + 'b';
cell2.innerHTML = "CELL2";
var cell3 = row.insertCell(2);
cell3.id = rowCount + 'c';
cell3.innerHTML = "CELL3";
var cell4 = row.insertCell(3);
cell4.id = rowCount + 'd';
cell4.innerHTML = "CELL4";
}
</SCRIPT>
</HEAD>
<BODY>
<INPUT type="button" value="Add Row" onclick="addRow('dataTable')" />
<TABLE id="dataTable" width="350px" border="1">
<thead>
<TD>Column 1</TD>
<TD>Column 2</TD>
<TD>Column 3</TD>
<TD>Column 4</TD>
</thead>
</TABLE>
</BODY>
我已經嘗試了以下選項：
alert（document.getElementById（1a））; 空值
alert（document.getElementById（1a）.value）; 錯誤消息：Microsoft JScript運行時錯誤：無法獲取屬性“值”的值：對象為null或未定義
alert（document.getElementById（“ dataTable”）。rows [rowCount] .cells [0]）; [賓語]
alert（document.getElementById（“ dataTable”）。rows [rowCount] .cells [0] .toString（））; [賓語]
alert（document.getElementById（“ dataTable”）。rows [rowCount] .cells [0] .value）; 未定義
這是如何獲取單元格值的示例。
給您連續命名的名稱（從行開始，然后是a，b，c，d，您應該可以通過id分別以1a或3c來訪問它們。這樣，下面的代碼就可以工作了 （補充您所發布的內容）：
<!-- head -->
<script>
function getVal(cellId){
var cell = document.getElementById(cellId);
document.getElementById('a').innerHTML = cell.innerHTML;
// highlight the cell for visual effect
cell.className = 'target';
setTimeout(function(){ cell.className = ''; }, 1e3);
}
</script>
<!-- /head -->
<!-- body -->
<INPUT type="text" id="q" />
<INPUT type="button" value="Get Value" onclick="getVal(document.getElementById('q').value);" />
<span id="a"></span>
<!-- /body -->
首先，您應該知道行號。
使用document.getElementById（id）獲取內容。 例如，id = $ rownumber + [abcd]
表格單元格沒有value屬性，但是您可以通過innerHTML屬性或innerText屬性訪問內容。 區別在於后者對瀏覽器的支持略微有限，並且它提供文本內容，而沒有任何標簽。 例：
alert(document.getElementById('1a').innerHTML)
如果這不起作用（如評論所示），則問題出在其他地方。 然后，您應該發布實際重現此問題的代碼。
要使用您當前的代碼訪問單元格的內容，您只需按您提供的ID尋址每個單元格，然后訪問innerHTML屬性：
var myCell = document.getElementById('1c')
var myCellContent = myCell.innerHTML
請記住，每列都有標題，因此實際上具有內容的第一行將是“ 1”而不是“ 0”。
我可以使用以下代碼訪問單元格內容：
document.getElementById（“ dataTable”）。rows [rowCount] .cells [0] .innerHTML
如何使用javascript訪問html表中每行的第二個單元格？
[英]How to access second cell of each row in a html table using javascript?
如何使用 javascript 在動態表中獲取單擊單元格的內容
[英]How to fetch contents of clicked cell in a dynamic table using javascript
如何根據行中另一個單元格的內容修改HTML表行的內容？
[英]How do you modify the contents of an HTML table row based on the contents of another cell in the row?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.