table to JSON

addEventListener to table

by sazakharov

HTML

<table>
	<tr>
		<td>
			<input type="text" value="1234567890">
		</td>
		<td>
			<input type="text" value="qwertyuiop">
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" value="asdfghjkl;">
		</td>
		<td>
			<input type="text" value="zxcvbnm,./">
		</td>
	</tr>
	<tr>
		<td>
			<input type="text" value="!@#$%^&*()">
		</td>
		<td>
			<input type="text" value="ASDCXZASSDCX">
		</td>
	</tr>
</table>
<code>
	
</code>

CSS

code {
	white-space: pre;
}

JavaScript

var table = document.querySelector('table'),
	code = document.querySelector('code'),
	obj = {};
table.addEventListener('input', function(){
	var tr = table.querySelectorAll("tr"),
		obj = {};
	[].forEach.call(tr, function(el, index){
		var inputs = Array.prototype.slice.call(el.querySelectorAll('input'));
		obj[index] = inputs.map(function(input){
			return input.value;
		});
	});
	code.innerHTML = JSON.stringify(obj, null, "  ");
});
table.dispatchEvent(new Event("input"));