Javascript 如何使用单元格id访问HTML表中单元格的内容？_Javascript_Html

Javascript 如何使用单元格id访问HTML表中单元格的内容？

javascript html

Javascript 如何使用单元格id访问HTML表中单元格的内容？,javascript,html,Javascript,Html,我使用JavaScript函数insertRow（）和insertCell（）创建了一个HTML表格。我为每个单元格分配了一个id。我想用JavaScript获取单元格的值/内容以下是用于创建表的代码： <HTML> <HEAD> <SCRIPT language="javascript"> function addRow(tableID) { var table = document.getElementBy

我使用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>


函数addRow（tableID）{
var table=document.getElementById（tableID）；
var rowCount=table.rows.length；
var row=table.insertRow（rowCount）；
row.id=行计数；
var cell1=行插入单元格（0）；
cell1.id=行数+a；
cell1.innerHTML=“cell1”；
var cell2=行插入单元格（1）；
cell2.id=行数+b'；
cell2.innerHTML=“cell2”；
var cell3=行插入单元格（2）；
cell3.id=行数+c'；
cell3.innerHTML=“cell3”；
var cell4=行插入单元格（3）；
cell4.id=行数+d'；
cell4.innerHTML=“cell4”；
}
第1栏
第2栏
第3栏
第4栏

我已经尝试了以下选项：

警报（document.getElementById（1a））；空的

警报（document.getElementById（1a.value）；错误消息：Microsoft JScript运行时错误：无法获取属性“value”的值：对象为null或未定义

警报（document.getElementById（“dataTable”）.rows[rowCount].cells[0]）； [对象]

警报（document.getElementById（“dataTable”）.rows[rowCount].cells[0].toString（））； [对象]

警报（document.getElementById（“dataTable”）.rows[rowCount].cells[0].value）；未定义

下面是一个如何获取单元格值的示例

如果您按顺序给它们命名（从第行开始，然后是a、b、c、d），您应该能够通过id将它们命名为

1a

或

3c

。因此，以下内容（补充您发布的内容）：


函数getVal（cellId）{
var cell=document.getElementById（cellId）；
document.getElementById（'a'）.innerHTML=cell.innerHTML；
//突出显示单元格以获得视觉效果
cell.className='target'；
setTimeout（函数（）{cell.className=''；}，1e3）；
}

首先，您应该知道行号

使用document.getElementById（id）获取内容。例如，id=$rownumber+[abcd]

表格单元格没有

值

属性，但您可以通过

innerHTML

属性或

innerText

属性访问内容。区别在于后者的浏览器支持更有限，并且提供文本内容，没有任何标记。例如：

alert(document.getElementById('1a').innerHTML)

如果这不起作用（正如一条评论所说），那么问题出在其他地方。然后，您应该发布实际再现问题的代码。

要使用当前代码访问单元格内容，您只需根据您提供的id对每个单元格进行寻址，然后访问innerHTML地址：

    var myCell = document.getElementById('1c')

    var myCellContent = myCell.innerHTML

请记住，每个列都有标题，因此实际包含内容的第一行将是“1”，而不是“0”。

我可以使用以下代码访问单元格内容：

document.getElementById（“数据表”）.rows[rowCount]。cells[0]。innerHTML

document.getElementById（'1a'））

应该可以工作吗？嗨，Brad，我已经试过了。当我试图提醒它时，我得到了一个空值。我得到了以下错误消息：Microsoft JScript运行时错误：无法获取属性“innerHTML”的值：对象为空或未定义。请确保输入一个有效的ID；我没有添加任何错误检查nippet，因为它只是一个概念证明（在尝试查找之前，您需要添加一行）。不，它不在JSFIDLE上。我得到的错误是代码中突出显示的以下行：“document.getElementById（'a'）。innerHTML=cell.innerHTML；”此外，我也无法理解这一行，因为没有ID为“a”的元素。出于某种原因，我在尝试这一行时也遇到了以下错误。错误消息：“Microsoft JScript运行时错误：无法获取属性“value”的值：对象为null或未定义”您必须在代码的某些部分仍在寻址“value”属性（可能是在您尝试使其工作时），因为它不在您发布的代码的任何部分。请查找该部分，然后重试=）

    var myCell = document.getElementById('1c')

    var myCellContent = myCell.innerHTML