如何运行 function onclick？ | Java 脚本

Question

Tries to write a script that finds rows in the table based on the searchbar and returns the result, but I got a problem with running function onclick. What am I doing wrong?

 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

you can not access rows like this myTable.rows as myTable is not a json object its a reference to table html element. You should use document.queryselectorall to get rows and columns inside table.

Answer 2

I don't think you can pass a variable like that. I would use querySelector for the button and the table in the js script. Then add an event listener to the button.

I could be wrong, but I think that's your issue. Hope that makes sense.