Convert HTML Table To CSV/Excel - Revision history

Planetoid: /* Approach 2: Using the Google Drive */

2016-07-04T03:33:58Z

Approach 2: Using the Google Drive

← Older revision		Revision as of 11:33, 4 July 2016
Line 24:		Line 24:

	Checking the rows of data after import on the {{Chrome}}		Checking the rows of data after import on the {{Chrome}}
	* Right click the table and then click the '''Inspect'''.		* 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].		* (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].		* 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].
Line 52:		Line 52:

	使用 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>}}

Planetoid: /* Approach 2 */

2016-07-04T03:33:08Z

Approach 2

← Older revision		Revision as of 11:33, 4 July 2016
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.

Planetoid: /* Approach 2 */

2016-07-04T03:32:12Z

Approach 2

← Older revision		Revision as of 11:32, 4 July 2016
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}}
	* Inspect the table element on the {{Chrome}}		* Right click the table and then click the '''Inspect'''.
	* (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].		* (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].		* 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].
Line 52:		Line 52:

	使用 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>}}

Planetoid: /* Approach 2 */

2016-07-04T03:28:49Z

Approach 2

← Older revision		Revision as of 11:28, 4 July 2016
Line 25:		Line 25:
	Checking the rows of data after import		Checking the rows of data after import
	* Inspect the table element on the {{Chrome}}		* Inspect the table element on the {{Chrome}}
	* (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].		* 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>		<pre>
	var tableId = "tableId";		var tableId = "tableId";

Planetoid: /* Approach 2 */

2016-06-28T03:53:15Z

Approach 2

← Older revision		Revision as of 11:53, 28 June 2016
Line 26:		Line 26:
	* Inspect the table element on the {{Chrome}}		* Inspect the table element on the {{Chrome}}
	* (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>}}
	* check the count number of rows:		* 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].
	* If the table contains the <tbody> tag. Go to [https://developer.chrome.com/devtools Chrome DevTools]. Key in the following code to [https://developer.chrome.com/devtools/docs/console console].		<pre>
	<pre>// If the table contains the <tbody> tag		var tableId = "tableId";
	~~var tableId = "tableId";~~		var tbody_exists = document.getElementById(tableId).getElementsByTagName("tbody").length;
	var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;		if( tbody_exists == 1 ){
	~~console.log("count number of rows which not contains heading: " + rows);~~		// If the table contains the <tbody> tag
			var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
	// If the table NOT contains the <tbody> tag
	~~var tableId = "tableId";~~		}else{
	var rows = document.getElementById(tableId).getElementsByTagName("tr").length;		// If the table NOT contains the <tbody> tag
	console.log("count number of rows ~~which contains heading~~: " + rows);		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 count number of rows.		* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the count number of rows.
Line 53:		Line 56:
	* 在網頁原始碼別處點一下，自動儲存修改		* 在網頁原始碼別處點一下，自動儲存修改
	* 檢查資料列數		* 檢查資料列數
	<pre> ~~// 如果網頁表格包含 <tbody> tag，在 chrome 開發者工具的 console 輸入~~		<pre>
	var tableId = "tableId";		var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;		var tbody_exists = document.getElementById(tableId).getElementsByTagName("tbody").length;
	console.log("~~不包含表頭那一行的資料列數~~: " + rows);		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);

	~~// 如果網頁表格不包含 <tbody> tag.，在 chrome 開發者工具的 console 輸入~~
	~~var tableId = "tableId";~~
	~~var rows = document.getElementById(tableId).getElementsByTagName("tr").length;~~
	~~console.log("包含表頭那一行的資料列數: " + rows);~~
	</pre>		</pre>
	* 按 {{kbd \| key =<nowiki>Enter</nowiki>}}，取得資料列數		* 按 {{kbd \| key =<nowiki>Enter</nowiki>}}，取得資料列數

Planetoid: /* Approach 2 */

2016-06-28T03:14:28Z

Approach 2

← Older revision		Revision as of 11:14, 28 June 2016
Line 31:		Line 31:
	var tableId = "tableId";		var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;		var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
	console.log("~~rows~~ count of ~~table~~ which not contains heading: " + rows);		console.log("count number of rows which not contains heading: " + rows);

	// If the table NOT contains the <tbody> tag		// If the table NOT contains the <tbody> tag
	var tableId = "tableId";		var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tr").length;		var rows = document.getElementById(tableId).getElementsByTagName("tr").length;
	console.log("~~rows~~ count of ~~table~~ which contains heading: " + rows);		console.log("count number of rows which contains heading: " + rows);
	</pre>		</pre>
	* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the rows ~~of table~~.		* 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>		* 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 column_count = document.getElementById(tableId).rows[0].cells.length;		var column_count = document.getElementById(tableId).rows[0].cells.length;
	console.log("~~column~~ count of ~~table~~: " + rows);		console.log("count number of column: " + rows);
	</pre>		</pre>
	* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the ~~rows~~ of ~~table~~.		* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the count number of column.

Planetoid: /* Approach 2 */

2016-06-28T03:06:55Z

Approach 2

← Older revision		Revision as of 11:06, 28 June 2016
Line 26:		Line 26:
	* Inspect the table element on the {{Chrome}}		* Inspect the table element on the {{Chrome}}
	* (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>}}
	* If the table contains the <tbody> tag. Go to [https://developer.chrome.com/devtools Chrome DevTools]. Key in the following code to [https://developer.chrome.com/devtools/docs/console console].		* check the count number of rows:
	<pre> var tableId = "tableId";		* If the table contains the <tbody> tag. Go to [https://developer.chrome.com/devtools Chrome DevTools]. Key in the following code to [https://developer.chrome.com/devtools/docs/console console].
			<pre>// If the table contains the <tbody> tag
			var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;		var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
	console.log("rows count of table which not contains heading: " + rows);		console.log("rows count of table which not contains heading: " + rows);

			// If the table NOT contains the <tbody> tag
			var tableId = "tableId";
			var rows = document.getElementById(tableId).getElementsByTagName("tr").length;
			console.log("rows count of table which contains heading: " + rows);
	</pre>		</pre>
	* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the rows of table.		* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the rows of table.
			* 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>
	* ~~If the table contains~~ the <~~tbody~~> ~~tag~~. ~~Key~~ in ~~the following code to console.~~
	<pre> var tableId = "tableId";		<pre> var tableId = "tableId";
	var ~~rows~~ = document.getElementById(tableId).~~getElementsByTagName("tr")~~.length;		var column_count = document.getElementById(tableId).rows[0].cells.length;
	console.log("~~rows~~ count of table ~~which contains heading~~: " + rows);		console.log("column count of table: " + rows);
	</pre>		</pre>
	* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the rows of table.		* And press the {{kbd \| key =<nowiki>Enter</nowiki>}} key to get the rows of table.
Line 46:		Line 52:
	* 手動幫表格加上 id ex: {{kbd \| key =<nowiki><table ... ... id="tableId"></nowiki>}}		* 手動幫表格加上 id ex: {{kbd \| key =<nowiki><table ... ... id="tableId"></nowiki>}}
	* 在網頁原始碼別處點一下，自動儲存修改		* 在網頁原始碼別處點一下，自動儲存修改
	* 如果網頁表格包含 <tbody> tag，在 chrome 開發者工具的 console 輸入		* 檢查資料列數
	~~<pre>~~ var tableId = "tableId";		<pre> // 如果網頁表格包含 <tbody> tag，在 chrome 開發者工具的 console 輸入
			var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;		var rows = document.getElementById(tableId).getElementsByTagName("tbody")[0].getElementsByTagName("tr").length;
	console.log("不包含表頭那一行的資料列數: " + rows);		console.log("不包含表頭那一行的資料列數: " + rows);
	~~</pre>~~
	* 按 {{kbd \| key =<nowiki>Enter</nowiki>}}，取得資料列數

	* 如果網頁表格不包含 <tbody> tag.，在 chrome 開發者工具的 console 輸入		// 如果網頁表格不包含 <tbody> tag.，在 chrome 開發者工具的 console 輸入
	~~<pre>~~ var tableId = "tableId";		var tableId = "tableId";
	var rows = document.getElementById(tableId).getElementsByTagName("tr").length;		var rows = document.getElementById(tableId).getElementsByTagName("tr").length;
	console.log("包含表頭那一行的資料列數: " + rows);		console.log("包含表頭那一行的資料列數: " + rows);
	</pre>		</pre>
	* 按 {{kbd \| key =<nowiki>Enter</nowiki>}}，取得資料列數		* 按 {{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 ==		== References ==

Planetoid: /* References */

2016-06-22T07:12:56Z

References

← Older revision		Revision as of 15:12, 22 June 2016
Line 62:		Line 62:
	== 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]]

Planetoid: /* Approach 2 */

2016-06-22T06:57:58Z

Approach 2

← Older revision		Revision as of 14:57, 22 June 2016
Line 45:		Line 45:
	* 選取網頁語法，按右鍵 Edit as HTML		* 選取網頁語法，按右鍵 Edit as HTML
	* 手動幫表格加上 id ex: {{kbd \| key =<nowiki><table ... ... id="tableId"></nowiki>}}		* 手動幫表格加上 id ex: {{kbd \| key =<nowiki><table ... ... id="tableId"></nowiki>}}
	* ~~按網頁別處，自動儲存~~		* 在網頁原始碼別處點一下，自動儲存修改
	* 如果網頁表格包含 <tbody> tag，在 chrome 開發者工具的 console 輸入		* 如果網頁表格包含 <tbody> tag，在 chrome 開發者工具的 console 輸入
	<pre> var tableId = "tableId";		<pre> var tableId = "tableId";

Planetoid: /* References */

2016-06-22T06:44:30Z

References

← Older revision		Revision as of 14:44, 22 June 2016
Line 63:		Line 63:
	* [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]

	[[Category:Tool]] [[Category:Data collecting]]		[[Category:Tool]]
			[[Category:Data collecting]]
			[[Category:Javascript]]