[英]Javascript array of arrays from html input table
我正在嘗試從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>";
?>
要將HTML表轉換為2d數組,請迭代其行TableElement.rows
。 在迭代每行時,循環其單元格TableRowElement.cells
並收集innerHTML
每個textContent
。
以JavaScript ES6 功能形式,它看起來像:
const tableToArray = tableId => [...document.querySelector(tableId).rows].map(row => [...row.cells].map(cell => cell.textContent) ); jQuery( $ => { $("#testBtn").on({ click () { const tableArray = tableToArray("#myTable"); console.log(tableArray); } }); });
<button id="testBtn">test</button> <table id="myTable"> <tr><td>a1</td><td>a2</td><td>a3</td></tr> <tr><td>b1</td><td>b2</td><td>b3</td></tr> <tr><td>c1</td><td>c2</td><td>c3</td></tr> <tr><td>d1</td><td>d2</td><td>d3</td></tr> </table> <script src="//code.jquery.com/jquery-3.3.1.js"></script>
使用ol'school for
循環和Array.push()
:
jQuery(function($){ $("#testBtn").click(function() { var table = document.getElementById("myTable"); var arrTable = []; for (var i = 0; i < table.rows.length; i++) { var row = table.rows[i]; var arrRow = []; for(var j = 0; j < row.cells.length; j++) { arrRow.push(row.cells[j].textContent); } arrTable.push(arrRow); } console.log(arrTable); }); });
<button id="testBtn">test</button> <table id="myTable"> <tr><td>a1</td><td>a2</td><td>a3</td></tr> <tr><td>b1</td><td>b2</td><td>b3</td></tr> <tr><td>c1</td><td>c2</td><td>c3</td></tr> <tr><td>d1</td><td>d2</td><td>d3</td></tr> </table> <script src="//code.jquery.com/jquery-3.3.1.js"></script>
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>
您可以在JQuery中使用.each()
:
$(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,請一直使用它。
我看到答案已經被接受,但是由於該問題被標記為“ 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);
});
看來您使用的是jQuery,請嘗試更改以下行
rowArray.push(tableInfo.rows[i].cells[j].innerHtml
至
rowArray.push(tableInfo.rows[i].cells[j].html();
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.