Editing Convert HTML Table To CSV/Excel



== Approach 1 ==
Pros: Keep the original text format such as link, color

Cons: Copy and paste the content manually

Steps:
# Copy the HTML table manually
# Paste to Microsoft Excel or [https://zh-tw.libreoffice.org/ LibreOffice] Calc
# Save file as CSV/Excel


== Approach 2: Using the Google Drive ==
Pros: The table content was imported automatically.

Cons: Text only. Losing the original text format such as link, color.

Steps:
# Go to [https://www.google.com/intl/zh-TW/drive/ Google Drive] (Google 雲端硬碟)
# Add new spreadsheet
# Using [https://support.google.com/docs/answer/3093339?hl=en IMPORTHTML] function. Key in the content into the cell {{kbd | key =<nowiki>=IMPORTHTML("URL of HTML Table","table",1)</nowiki>}} 1 means the first table occurred on the web page
# Save file as CSV/Excel

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>}}. 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";
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>
* 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"; 
 var column_count = document.getElementById(tableId).rows[0].cells.length;
 console.log("count number of column: " + rows);
</pre>
* And press the {{kbd | key =<nowiki>Enter</nowiki>}} key to get the count number of column.



使用 chrome 檢查表格資料列數
* 點選網頁上的表格，按滑鼠右鍵選擇選單上的「'''檢查'''」
* 選取網頁語法，按右鍵 Edit as HTML
* 手動幫表格加上 id ex: {{kbd | key =<nowiki><table ... ... id="tableId"></nowiki>}}
* 在網頁原始碼別處點一下，自動儲存修改
* 檢查資料列數 
<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>
* 按 {{kbd | key =<nowiki>Enter</nowiki>}}，取得資料列數
* 檢查資料欄位數 
<pre> var tableId = "tableId"; 
 var column_count = document.getElementById(tableId).rows[0].cells.length;
 console.log("資料欄數: " + rows);
</pre>
* 按 {{kbd | key =<nowiki>Enter</nowiki>}}，取得資料欄位數

== 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]

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:Data collecting]]
[[Category:Javascript]]