У меня есть таблица, сгенерированная из текстовой области, заполненной пользователями, но иногда ячейка остается пустой (и все в порядке).
Дело в том, что .innerHTML этой ячейки также мой var y в сценарии, и когда эта ячейка пуста (поэтому не определена), моя var y тоже становится НЕ УКАЗАНА (значение, а не строка), что приводит к сбою всего сценария.
Вот фрагмент, чтобы показать проблему:
<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"/>
Как вы можете видеть, если вы генерируете таблицу только с столбцами (что предполагается / иногда должно происходить), мы получаем эту ошибку из консоли, потому что мы ' мы пытаемся получить "внутреннее HTML" из неопределенного:
index.html:120 Uncaught TypeError: Cannot read property 'innerHTML' of undefined
Небольшое уточнение: когда эта ячейка = undefined, мне нужно, чтобы она оставалась undefined Я только хочу изменить тот факт, что мой var y также становится неопределенным. Поэтому я подумал, что изменение значения var y (а не значения этой ячейки, в противном случае 3-й столбец, который должен быть пустым, будет создан только из-за пробела) на пустое пространство, решит проблему, но я не понимаю, как это правильно (напишите это правильно).
Есть идеи?