【发布时间】：2020-04-25 07:50:52
【问题描述】：
我有一个由用户填充的文本区域生成的表格，但有时，一个单元格保持为空（没关系）。
问题是该单元格的.innerHTML 也是脚本中的var y，当该单元格为空（因此，未定义）时，我的var y 也变为未定义（值，而不是字符串） ，这使我的整个脚本失败。
这是一个显示问题的sn-p：
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body><center>
</center></body>
<!--------- script that generates my table from text areas -->
<script>
function generateTable() {
$('#excel_table1').html("");
var n=1;
var rows=[];
var lng=0;
var maxligne=0;
$('textarea').each(function(){
var data = $(this).val();
if (data !=''){
var rowData = data.split("\n");
rows[n] = rowData;
lng = rowData.length;
if(lng > maxligne)
{
maxligne=lng
}
n++;
}
}
)
var table = $('<table />');
k=0;
while (k < maxligne) {
var row = $('<tr />');
for(var i = 1; i < rows.length; i++)
{
var singleRow = rows[i];
if(singleRow[k]!= undefined){
row.append('<td>'+singleRow[k]+'</td>')
} else {
row.append('<td></td>')
}
}
table.append(row);
k++;
}
$('#excel_table1').append(table);
}
</script>
<textarea placeholder="data 2 Here" name="data1" style="width:100px;height:40px;"></textarea>
<textarea placeholder="data 2 Here" name="data2" style="width:200px;height:40px;"></textarea>
<textarea placeholder="fild not required" name="data3" style="width:200px;height:40px;"></textarea>
<br>
<input id=bouton1 type="button" onclick="javascript:generateTable()" value="GenerateTable"/>
<div id="excel_table1"></div>
<!--------- script that get the data from cells to show it in <H2> -->
<script type="text/javascript">
function buttonTEST()
{
$('#displayCell').html("");
var x = document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[1].innerHTML;
var y = document.getElementById('excel_table1').getElementsByTagName('tr')[0].cells[2].innerHTML;
if (y === undefined) {
y = " ";
}
document.getElementById('displayCell').innerHTML = x +" "+ y;
}
</script>
<br/><br/>
<h2 id="displayCell"></h2>
<br/><br/>
<input id="Button2" type="button" onclick="buttonTEST()" value="TEST ME"/>如您所见，如果您生成一个仅包含列的表（有时应该/需要发生），我们会从控制台收到此错误，因为我们试图从未定义的对象中获取“innerHTML”：
index.html:120 Uncaught TypeError: Cannot read property 'innerHTML' of undefined
一个小规范：当那个单元格是=undefined时，我需要它保持undefined，我只想改变我的var y也变得未定义的事实。
所以我认为将var y 的值（而不是该单元格的值，否则，应该为空的第三列将因为空格而创建）为空格将解决问题，但我似乎没有写对（以正确的方式写出来）。
有什么想法吗？
【问题讨论】：
-
您能否在此处使用jsfiddle 或snippet 为此创建一个small demo 以显示正在发生的问题。
-
您的脚本没有失败，因为 y 未定义。它失败了，因为您试图获取未定义元素的 innerHTML。任一单元格或“响应”元素。
-
您似乎拥有 jQuery，但仍求助于良好的旧原生 DOM 函数。除了明显的编码错误，如果你只是坚持使用库，你可能不会遇到未定义元素的问题。
-
@palaѕн 是的，好主意。现在更容易理解了，谢谢！
-
@JonasHøgh 是的，你完全正确！但实际上我已经知道了，但是我不能从
getElementsByTagName('tr')[0].cells[2].innerHTML中删除innerHTML，因为当单元格存在时，我需要它的innerHTLM；这就是为什么我试图在“未定义”时更改var的值。
标签： javascript undefined innerhtml var