从字符串数组创建表，以便每个字符串都是其自己的列，而每一行都是该字符串的字母

Question

我不知道问这个问题的正确方法，因为我已经搜索并尝试实施其他方法而没有运气。 Javascript不是我的强项，所以请多多包涵。

我有一个输入看起来像，每个条目可以具有不同的宽度：

#abcde#fghij#klmno

我根据字符分割输入，最后得到一个看起来像这样的数组：

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

我需要输出一个表，以使第一列包含第一个字符串中的所有字母，每个字母都在其自己的行中，基本上以一个如下表结尾：

a f k

b g l

c h m

d i n

e j o

到目前为止，我已经有效地分割了字符串，但是创建表时遇到了麻烦。 我在SO上尝试了多种不同的解决方案，但没有走运。 我的经验不足使我在处理每个步骤时都感到困惑。 尽管我尝试的实现均未成功，但我已经添加了针对我认为需要在for循环的每个块中添加的注释。

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);

我遇到的问题区域之一是字符串的长度不会相同，并且显示顺序与输入时的顺序相同。

这使得很难创建一定数量的行，然后逐行而不是逐列地填充行。

Answer 1

首先，我们将输入字符串拆分为哈希字符（＃）。 接下来，我们过滤结果数组，只返回不是空字符串的元素。

从那里，我们创建另一个数组，其中第一个数组中每个字符串的长度都相同。 我们将这个长度数组降序排列，并采用第一个元素-这对应于最长单词的长度-这将是我们需要的行数。 列数来自我们首先计算的数组长度-初始输入字符串中的单词数。

从那里开始，我们仅浏览数据并创建表，tr和td元素。 理想情况下，我们还应该创建一个tbody元素并将tr元素放置在其中而不是表格中。

 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 ba} ); 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; } 

Answer 2

它看起来像这样：

//<![CDATA
var pre = onload, doc, bod, htm, C, E, weirdTable;
onload = function(){
if(pre)pre();

doc = document; bod = doc.body; htm = doc.documentElement;
C = function(e){
  return doc.createElement(e);
}
E = function(id){
  return doc.getElementById(id);
}
weirdTable = function(inputString, appendTo){
  var a = inputString.split(/#/), t = C('table'), b = C('tbody');
  for(var i=0,l=a.length; i<l; i++){
    var r = C('tr'), s = a[i].split('');
    for(var n=0,c,q=s.length; n<q; n++){
      c = C('td'); c.innerHTML = s[n]; r.appendChild(c);
    }
    b.appendChild(r);
  }
  t.appendChild(b); appendTo.appendChild(t);
}
weirdTable(yourStringHere, E('yourIdHere'));

}
//]]>