14,953
edits
Convert HTML Table To CSV/Excel: Difference between revisions
Jump to navigation
Jump to search
m
→Approach 2: Using the Google Drive
m (→Approach 2) |
|||
| (7 intermediate revisions by the same user not shown) | |||
| Line 12: | Line 12: | ||
== Approach 2 == | == Approach 2: Using the Google Drive == | ||
Pros: The table content was imported automatically. | Pros: The table content was imported automatically. | ||
| Line 23: | Line 23: | ||
# Save file as CSV/Excel | # Save file as CSV/Excel | ||
Checking the rows of data after import | Checking the rows of data after import on the {{Chrome}} | ||
* Right click the table and then click the '''Inspect''' item of the menu. | |||
* (optional) add tableId if the table has no id ex: {{kbd | key =<nowiki><table ... ... id="tableId"></nowiki>}} | * (optional) add tableId if the table has no id ex: {{kbd | key =<nowiki><table ... ... id="tableId"></nowiki>}}. Howto: [https://developers.google.com/web/tools/chrome-devtools/iterate/inspect-styles/ Inspect and Edit Pages and Styles | Web Tools - Google Developers]. | ||
* | * Check the count number of rows: Go to [https://developer.chrome.com/devtools Chrome DevTools]. Key in the following code to [https://developer.chrome.com/devtools/docs/console console]. | ||
<pre> var tableId = "tableId"; | <pre> | ||
var tableId = "tableId"; | |||
var tbody_exists = document.getElementById(tableId).getElementsByTagName("tbody").length; | |||
if( tbody_exists == 1 ){ | |||
// If the table contains the <tbody> tag | |||
var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length; | |||
}else{ | |||
// If the table NOT contains the <tbody> tag | |||
var rows = document.getElementById(tableId).getElementsByTagName("tr").length; | |||
} | |||
console.log("count number of rows: " + rows); | |||
</pre> | </pre> | ||
* And press the {{kbd | key =<nowiki>Enter</nowiki>}} key to get the rows | * And press the {{kbd | key =<nowiki>Enter</nowiki>}} key to get the count number of rows. | ||
* check the count number of column: <ref>[http://stackoverflow.com/questions/10043760/javascript-count-number-of-columns-in-a-table-row html - Javascript: Count number of columns in a table row - Stack Overflow]</ref> | |||
* | |||
<pre> var tableId = "tableId"; | <pre> var tableId = "tableId"; | ||
var | var column_count = document.getElementById(tableId).rows[0].cells.length; | ||
console.log(" | console.log("count number of column: " + rows); | ||
</pre> | </pre> | ||
* And press the {{kbd | key =<nowiki>Enter</nowiki>}} key to get the | * And press the {{kbd | key =<nowiki>Enter</nowiki>}} key to get the count number of column. | ||
使用 chrome 檢查表格資料列數 | 使用 chrome 檢查表格資料列數 | ||
* 點選網頁上的表格，按滑鼠右鍵選擇選單上的「'''檢查'''」 | |||
* 選取網頁語法，按右鍵 Edit as HTML | * 選取網頁語法，按右鍵 Edit as HTML | ||
* 手動幫表格加上 id ex: {{kbd | key =<nowiki><table ... ... id="tableId"></nowiki>}} | * 手動幫表格加上 id ex: {{kbd | key =<nowiki><table ... ... id="tableId"></nowiki>}} | ||
* 在網頁原始碼別處點一下，自動儲存修改 | * 在網頁原始碼別處點一下，自動儲存修改 | ||
* | * 檢查資料列數 | ||
<pre> var tableId = "tableId"; | <pre> | ||
var tableId = "tableId"; | |||
var tbody_exists = document.getElementById(tableId).getElementsByTagName("tbody").length; | |||
if( tbody_exists == 1 ){ | |||
// 如果網頁表格包含 <tbody> tag | |||
var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length; | |||
}else{ | |||
// 如果網頁表格不包含 <tbody> tag | |||
var rows = document.getElementById(tableId).getElementsByTagName("tr").length; | |||
} | |||
console.log("count number of rows: " + rows); | |||
</pre> | </pre> | ||
* 按 {{kbd | key =<nowiki>Enter</nowiki>}}，取得資料列數 | * 按 {{kbd | key =<nowiki>Enter</nowiki>}}，取得資料列數 | ||
* 檢查資料欄位數 | |||
* | |||
<pre> var tableId = "tableId"; | <pre> var tableId = "tableId"; | ||
var | var column_count = document.getElementById(tableId).rows[0].cells.length; | ||
console.log(" | console.log("資料欄數: " + rows); | ||
</pre> | </pre> | ||
* 按 {{kbd | key =<nowiki>Enter</nowiki>}} | * 按 {{kbd | key =<nowiki>Enter</nowiki>}}，取得資料欄位數 | ||
== References == | == References == | ||
* [http://stackoverflow.com/questions/3053503/javascript-to-get-rows-count-of-a-html-table JavaScript to get rows count of a HTML table - Stack Overflow] | * [http://stackoverflow.com/questions/3053503/javascript-to-get-rows-count-of-a-html-table JavaScript to get rows count of a HTML table - Stack Overflow] | ||
further reading | |||
* [http://stackoverflow.com/questions/1173194/select-all-div-text-with-single-mouse-click javascript - Select all DIV text with single mouse click - Stack Overflow] | |||
[[Category:Tool]] | [[Category:Tool]] | ||
[[Category:Data collecting]] | [[Category:Data collecting]] | ||
[[Category:Javascript]] | [[Category:Javascript]] | ||