我不知道问这个问题的正确方法,因为我已经搜索并尝试实现不同的方法,但没有运气。 JavaScript 不是我的强项,所以请耐心等待。
我有一个输入,看起来像,每个条目可以有不同的宽度:
#abcde#fghij#klmno
我根据字符分割输入,最终得到一个如下所示的数组:
["abcde","fghij","klmno"]
我需要输出一个表格,使得第一列包含第一个字符串中的所有字母,每个字母都在自己的行中,基本上以一个如下所示的表格结束:
a f k
b g l
c h m
d i n
e j o
到目前为止,我已经有效地分割了字符串,但在创建表时遇到了问题。我已经尝试了多种不同的解决方案,但没有运气。我的经验不足让我在处理每一步时都陷入困境。尽管我尝试过的实现并不成功,但我已经添加了我认为需要在 for 循环的每个 block 中添加的注释。
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);
我遇到的问题之一是字符串的长度不相同,并且需要以与它们进入时相同的顺序显示。
这使得创建一定数量的行然后逐行而不是逐列填充它们变得困难。
最佳答案
首先,我们根据哈希字符 (#) 拆分输入字符串。接下来,我们过滤结果数组,仅返回非空字符串的元素。
从那里,我们创建另一个数组,其中包含第一个数组中每个字符串的长度。我们按降序对这个长度数组进行排序,并取出第一个元素 - 这对应于最长单词的长度 - 这将是我们需要的行数。列数来 self 们首先计算的数组长度 - 初始输入字符串中的单词数。
从那里,我们只需单步遍历数据并创建表、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 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;
}
关于javascript - 从字符串数组创建表,以便每个字符串都有自己的列,每行都是该字符串的一个字母,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39967607/