如何運行 function onclick？ | Java 腳本

Question

嘗試編寫一個腳本，根據搜索欄在表中查找行並返回結果，但我在運行 function onclick 時遇到問題。 我究竟做錯了什么？

 function tableToArray(myTable) { var result = [] var rows = myTable.rows; var cells, t; // Iterate over rows for (var i=0, iLen=rows.length; i<iLen; i++) { cells = rows[i].cells; t = []; // Iterate over cells for (var j=0, jLen=cells.length; j<jLen; j++) { t.push(cells[j].textContent); } result.push(t); } var programs = result.map(function(value,index) { return value[0]; }); var search = document.getElementById('programInput').value.toUpperCase(); var wynik = result.filter(function(item){return item[0] === search; }); return wynik; } document.write(JSON.stringify(tableToArray(document.getElementsByTagName('table')[0])));

 <input type="text" placeholder="Search..." id="programInput"> <button id="programbutton" type="submit" onclick="tableToArray(myTable)">Search</button> <div id="results"> </div> <table id="myTable" style="border: none;"><thead class="wp2s2fg_fetcher_table_thead" style="border:none; : 1px solid #ccc; "><tr class="wp2s2fg_fetcher_table_tr"><th class="wp2s2fg_fetcher_table_th " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:#fff; background-color:#fff; ">Program</th><th class="wp2s2fg_fetcher_table_th " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:#fff; background-color:#fff; ">Typ</th><th class="wp2s2fg_fetcher_table_th " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:#fff; background-color:#fff; ">Obsługiwany</th><th class="wp2s2fg_fetcher_table_th " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:#fff; background-color:#fff; ">Type</th></tr></thead><tbody class="wp2s2fg_fetcher_table_tbody"><tr class="wp2s2fg_fetcher_table_tr"><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">Program1</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">PP</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">TRUE</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">A</td></tr><tr class="wp2s2fg_fetcher_table_tr"><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">Program2</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">PP</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">FALSE</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">B</td></tr></tbody><tfoot class="wp2s2fg_fetcher_table_tfoot"><tr class="wp2s2fg_fetcher_table_tr"><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">Program3</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">PP</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">TRUE</td><td class="wp2s2fg_fetcher_table_td " style="font-size:16px; color:inherit; line-height:1; letter-spacing:1px; font-weight:normal; border:none; border: 1px solid #ccc; text-align:left; background-color:#fff; ">C</td></tr></tfoot></table>

Answer 1

您不能訪問像 myTable.rows 這樣的行，因為 myTable 不是 json object 它是對表 html 元素的引用。 您應該使用 document.queryselectorall 來獲取表內的行和列。

Answer 2

我不認為你可以傳遞這樣的變量。 我會對 js 腳本中的按鈕和表格使用querySelector 。 然后為按鈕添加一個事件監聽器。

我可能是錯的，但我認為這是你的問題。 希望這是有道理的。