table要素をもとにハッシュを生成

table要素をもとにハッシュを生成するには、次のような方法で可能です。

関数定義

/**
 * table要素をもとにハッシュを生成
 * @param {Element|Node} targetTable 対象のtable要素
 * @param {string[]} keyNames キーとして与えるカラム名
 * @return {object|object[]} 変換されたハッシュ(または配列の入れ子)を返す
 */
var hash2table = function(targetTable, keyNames) {
	var result = false;

	if (!keyNames) keyNames = [];

	// tbody取得
	var getTbody = function(parentElement) {
		var result     = false,
		    childNodes = getChildrenNotTextNode(parentElement);

		for (var i = 0, len = childNodes.length; i < len; i++) {
			if (childNodes[i].tagName && childNodes[i].tagName.toLowerCase() === 'tbody') {
				result = childNodes[i];
				break;
			}
		}

		return result;
	};

	// 行取得(tr)
	var getRows = function(parentElement) {
		var results    = false,
		    childNodes = getChildrenNotTextNode(parentElement);

		for (var i = 0, len = childNodes.length; i < len; i++) {
			if (childNodes[i].tagName && childNodes[i].tagName.toLowerCase() === "tr") {
				if (!results) results = [];
				results.push(childNodes[i]);
			}
		}

		return results;
	};

	// セル取得(th, td)
	var getCells = function(parentElements) {
		var results    = false,
		    childNodes = [],
		    ii         = 0,
		    len2       = 0,
		    key        = 0,
		    cellCount  = 0;
		    columnKey  = false;

		childNodes = getChildrenNotTextNode(parentElements[0]);

		if (keyNames.length === childNodes.length) columnKey = true;

		for (var i = 0, len = parentElements.length; i < len; i++) {
			childNodes = getChildrenNotTextNode(parentElements[i]);

			if (!results) results = [];

			results[i] = columnKey ? {} : [];
			cellCount  = 0;

			for (ii = 0, len2 = childNodes.length; ii < len2; ii++) {
				if (childNodes[ii].tagName && childNodes[ii].tagName.toLowerCase().match(/^t[dh]$/)) {
					key = columnKey ? keyNames[cellCount] : cellCount;

					if (childNodes[ii].innerText) {
						results[i][key] = childNodes[ii].innerText;
					} else if (childNodes[ii].textContent) {
						results[i][key] = childNodes[ii].textContent;
					} else {
						results[i][key] = '';
					}
					cellCount++;
				}
			}
		}

		return results;
	};

	// テキストノードを除く子要素を取得
	var getChildrenNotTextNode = function(parentElement) {
		var results    = false,
		    childNodes = parentElement.childNodes;

		for (var i = 0, len = childNodes.length; i < len; i++) {
			if (childNodes[i].nodeType !== 3) {
				if (!results) results = [];
				results.push(childNodes[i]);
			}
		}

		return results;
	};

	if (targetTable && typeof targetTable === 'object') {
		var tbodyElement = getTbody(targetTable),
		    rowElements  = false,
		    celsData     = false;

		result = {};

		if (tbodyElement) rowElements = getRows(tbodyElement);

		if (rowElements && rowElements.length > 0) {
			celsData = getCells(rowElements);
		}

		if (celsData && celsData.length > 0) result = celsData;
	}

	return result;
};

使い方

構文

var result = hash2table(targetTable[, keyNames]);
引数
引数名 説明
第一引数
必須
targetTable Element|Node 対象のtable要素
第二引数 keyName string[] キーとして与えるカラム名

戻り値

変換されたハッシュ(または配列の入れ子)を返します。

var tableElement = document.getElementById('table-area');

var hash = hash2table(tableElement);

JavaScript逆引きリファレンス一覧へ戻る