Javascript массив массивов из таблицы ввода html

Question

Я пытаюсь получить массив массивов из таблицы ввода текста html, но когда я смотрю на массив массивов, я возвращаюсь, заполняя его пустыми строками, хотя должно быть много текста по умолчанию, и я заполнил еще несколько ячеек. Здесь вызывается javascript, за которым следует php, используемый для генерации таблицы. Когда я нажимаю кнопку, я получаю

«,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,, ,,,,,,,,,,,,,,,,,,,»

<script type="text/javascript"> 
    $(document).ready(function(){ 
    $("#testButton2").click(function(){ 
     var tableInfo=document.getElementById("myTable"); 

     console.log(tableInfo); 

     var tableArray= []; 
     for (var i = 1; i < tableInfo.rows.length; i++) { 
      //var row = tableInfo.rows[i]; 
      var rowArray = []; 
      for (var j = 0; j < tableInfo.rows[i].length; j++) { 
       rowArray.push(tableInfo.rows[i].cells[j].innerHtml); 
      } 
      tableArray.push(rowArray); 
     } 
     alert(tableArray.toString()); 
    }); 
}); 
</script> 

<?php 
$table = "info.csv"; 
$id = "myTable"; 
$count = 0; 
echo "<table id=".$id.">\n\n"; 
$f = fopen($table, "r"); 
while (($line = fgetcsv($f)) !== false) { 
    echo "<tr>"; 
    foreach ($line as $cell) { 
     if ($count != 0) { 
      echo "<td><input value=" . htmlspecialchars($cell) . "></input></td>"; 
        } else { 
         echo "<td>" . htmlspecialchars($cell) . "</td>"; 
        }  
       } 
      echo "</tr>\n"; 
      $count += 1; 
     } 
     fclose($f); echo "\n</table>"; 
?> 

Answer 1

Помимо других ошибок JS tableInfo.rows[i].length всегда будет 1 ...

Используйте вместо этого: jsBin demo

$("#testButton2").click(function(){ 
    var tableInfo=document.getElementById("myTable"); 
    var tableArray= []; 

    // Start at i=0 
    for (var i = 0; i < tableInfo.rows.length; i++) { 
     var row = tableInfo.rows[i]; 
     var rowArray = []; 
     for(var j = 0; j < row.cells.length; j++) { 
      rowArray.push(row.cells[j].innerHTML); 
     } 
     tableArray.push(rowArray); 
    } 
    console.log(tableArray); 
}); 

Answer 2

похоже, вы используете JQuery, попробуйте изменить следующую строку

rowArray.push(tableInfo.rows[i].cells[j].innerHtml 

до

rowArray.push(tableInfo.rows[i].cells[j].html(); 

Answer 3

jsFiddle: http://jsfiddle.net/Twisty/vdsz2gpL/

Если ваш HTML, как так:

<a href="#" id="testButton2">Run</a> 
<br /> 
<br /> 
<table id="myTable"> 
    <tr> 
     <td>Cell 1</td> 
    </tr> 
    <tr> 
     <td>Cell 2</td> 
    </tr> 
    <tr> 
     <td>Cell 3</td> 
    </tr> 
</table> 

Вы можете использовать .each() в JQuery:

$(document).ready(function() { 
    $("#testButton2").click(function() { 
     var tableArray = []; 
     var tableInfo = $("#myTable"); 
     $("#myTable tr").each(function (i, row) { 
      $(this).find("td").each(function(i, cell){ 
       tableArray.push($(cell).text()); 
      }); 
     }); 
     alert(tableArray.toString()); 
    }); 
}); 

Если вы используете JQuery, используйте все путь через.

Answer 4

Я вижу, что ответ был принят уже но вопрос в том, с меткой «jQuery», может быть интересно увидеть, насколько компактным будет решение jQuery:

$("#testButton2").click(function() { 
    var tableArray = $("#myTable tr").map(function(tr) { 
     return $("td", tr).map(function(td) { 
      return $(td).text(); 
     }).get(); 
    }).get(); 
    console.log(tableArray); 
});