Sparkybear Sparkybear - 1 month ago 7
Javascript Question

Create table from Array of Strings so that each string is its own column and each row is a letter of the string

I don't know the proper way to ask this, as I have searched and tried to implement different approaches without luck. Javascript isn't my strong suit so bear with me.

I have an input that looks like, each entry can be of varied width:

#abcde#fghij#klmno


I split the input based on the characters and end up with an array that looks like:

["abcde","fghij","klmno"]


I need to output a table such that the first column contains all letters from the first string which each letter in its own row, essentially ending up with a table that looks like:

a f k

b g l

c h m

d i n

e j o


As of right now I have split the strings effectively, but am having trouble creating the table. I've tried multiple different solutions on SO without luck. My inexperience is messing me up in handling the processing at each step. I've added comments for what I think needs to go in each block of my for loop, though the implementations I have tried are not successful.

var table = document.createElement("table");
var tr = document.createElement("tr");
var td = document.createElement("td");
var th = document.createElement("th");
var checkbox = document.createElement("input");
checkbox.type("checkbox");

//split string
var splitStringArray = inputString.split("#");

for (var i = 0; i < splitStringArray; i++) {
//iterate through array and create a column for each string in the array
tr.appendChild(document.createElement(th));

//for each string, iterate through each character
var temp = splitStringArray[i].split("");
for (var j = 0; j < temp.length; j++) {

//add a row for each character in the string, each cell should have a checkbox and the letter associated with it

td.appendChild(document.createTextNode[i][j]);
td.appendChild(checkbox);

//This this the step that I'm running into issues with

}
}
tableArea.appendChild(table);


One of the problem areas I'm running into is that the strings are not going to be identical length and need to displayed in the same order than they come in.

That makes it difficult to create a set number of rows and then populate them row by row instead of column by column.

Answer

First, we split the input string on the hash character (#). Next, we filter the resultant array, returning only the elements which aren't an empty string.

From there, we create another array with the length of each of the strings in our first array. We sort this length array in descending order and take the first element - this corresponds to the length of the longest word - this will be the number of rows we need. The number of columns comes from the length of the array we calculated first - the number of words in the initial input string.

From there, we simply step through the data and create table, tr and td elements. Ideally, we should also be creating a tbody element and placing the tr elements in it instead of the table.

function newEl(tag){return document.createElement(tag)}

window.addEventListener('load', onDocLoaded, false);

function onDocLoaded(evt)
{
	var tbl = testFunc('#abcde#fghij#klmno');
	document.body.appendChild(tbl);
}

function testFunc(inputStr)
{
	var wordArray = inputStr.split('#').filter(function(str){return str != '';});
	var lengthArray = wordArray.map( function(str) {return str.length;} );
	
	var numColumns = wordArray.length;
	lengthArray.sort( function(a, b){return b-a} );
	var maxRows = lengthArray[0];

	var tbl = newEl('table');
	var tbody = newEl('tbody');
	tbl.appendChild(tbody);
	for (var row=0; row<maxRows; row++)
	{
		var tr = newEl('tr');
		for (var col=0; col<numColumns; col++)
		{
			var td = newEl('td');
			td.textContent = wordArray[col][row];
			tr.appendChild(td);
		}
		tbody.appendChild(tr);
	}
	return tbl;
}

Comments