JS：用 if 将 "var y = UNDEFINED" 更改为 "var y= blank space"

Question

我有一个 table 从用户填写的文本区域生成的，但有时，单元格保持为空（没关系）。

问题是该单元格的 .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"/>

如您所见，如果您生成仅包含 to 列的 table（有时 supposed/needs 会发生），我们会从控制台收到此错误，因为我们正在尝试获取"innerHTML" 来自未定义的：

index.html:120 Uncaught TypeError: Cannot read property 'innerHTML' of undefined

一点说明：当那个单元格是=undefined时，我需要它保持undefined，我只想改变我的var y也变得未定义的事实。所以我认为将 var y 的值（而不是那个单元格的值，否则，第三列，应该是空的，会因为一个空白 space 而被创建）到一个空白space 可以解决问题，但我好像没写对（写得对）。

有什么想法吗？

Answer 1

尝试

var x = document.getElementById('excel_table1').rows[0].cells[0].innerHTML;
var y = document.getElementById('excel_table1').rows[0].cells[1].innerHTML;

使用行而不是 getElementsByTagName 更干净。另请注意，单元格的索引从零开始而不是 1，您的第一行中可能只有 2 个单元格，但 .cells[2].innerHTML 尝试获取不存在的第三个单元格的 innerHTML。

Answer 2

正如其他人所指出的，您已经在使用 jQuery，因此获取单元格内容的最简单方法是使用 css select 或查找单元格使用 $ 函数，然后调用 .html() 获取内容。将您当前的代码直接转换为这种方法可以是：

var x = $('#excel_table1 tr:nth-child(1) td:nth-child(2)').html();
var y = $('#excel_table1 tr:nth-child(1) td:nth-child(3)').html();

它的工作方式使得 $ 函数 return 是一个 jQuery 对象，它本质上是一组元素，可能是空的。大多数 jQuery 函数被设计为在空集上调用时优雅地失败。例如，html 在空集上调用时将 return 未定义，但不会失败。

请注意，使用 select 或更高版本不是很稳健，因为它显然对单元格的放置很敏感。将 class 属性分配给描述其内容的单元格，然后在其上分配 select 会更易于维护，例如像

var name = $("#excel_table1 tr:nth-child(1) td.name").html()

Answer 3

所以这是对我有用的答案：

<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 = $('#excel_table1 tr:nth-child(1) td:nth-child(2)').html();
var y = $('#excel_table1 tr:nth-child(1) td:nth-child(3)').html();
               
 if (y ===undefined)

    {document.getElementById('displayCell').innerHTML = x ;}
               
 else
     {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"/>

JS：用 if 将 "var y = UNDEFINED" 更改为 "var y= blank space"

JS: change "var y = UNDEFINED" for "var y= blank space" with if

javascript

var

innerhtml

undefined