我已经能够四处寻找解决方案，并为我的案子进行匹配，但是似乎我走到了尽头。
目标：网站要求您在文本框中键入任何单词并提交。在提交时，它通过使用JavaScript生成一个表格，将单词分解为字母并将它们对角地放在表格上。
当前位置：我已经成功地将给定的单词发布到JavaScript变量中，从那里我可以将单词分解为单独的字符。我还使用JavaScript生成了一个HTML表，但是如何在其中找到单词呢？
我很高兴能解决我的问题，但是如果它生成表格并且其内容满足对角线，则将获得加分：
[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]
这是我的代码：
function printWord() {
var word = document.getElementById('word').value;
var body=document.getElementsByTagName('body')[0];
var tbl=document.createElement('table');
tbl.style.width='80%';
tbl.setAttribute('border','1');
var tbdy=document.createElement('tbody');
for(var i=0;i<3;i++){
var tr=document.createElement('tr');
for(var j=0;j<2;j++){
if(i==2 && j==1){
break
} else {
var td=document.createElement('td');
td.appendChild(document.createTextNode('\u0020'))
i==1&&j==1?td.setAttribute('rowSpan','2'):null;
tr.appendChild(td)
}
}
tbdy.appendChild(tr);
}
tbl.appendChild(tbdy);
body.appendChild(tbl)
for (var i = 0; i < word.length; i++) {
console.log(word.charAt(i));
}
}<html>
<head>
<title>Help requested - Forming a table from word</title>
</head>
<body>
<div id="table">
<table>
<tr>
<td><b>Type a word:</b></td>
<td>
<input type="text" id="word">
</td>
</tr>
<tr>
<td id="btn" colspan="2">
<button type="button" onclick="printWord();">Submit</button>
</td>
</tr>
</table>
</div>
</body>
</html>感谢提供的任何帮助或提示！
最佳答案
这是您的问题的解决方案：
function generateTable() {
var $c = document.getElementById("container");
var $table = document.createElement('table');
var $tbody = document.createElement('tbody');
var word = document.getElementById('word').value.split("");
$c.appendChild($table);
$table.appendChild($tbody);
for (var i=0, l=word.length; i<l; i++) {
var $tr = document.createElement('tr');
$tbody.appendChild($tr);
for (var j=0, jl=word.length; j<jl; j++) {
var $td = document.createElement('td');
$td.appendChild(document.createTextNode(i==j ? word[i] : "-"));
$tr.appendChild($td);
}
}
}<textarea id="word"></textarea><br>
<button id="generate" onclick="generateTable();">Generate</button>
<div id="container"></div>