使用JavaScript从给定单词生成HTML表

我一直在寻找解决方案，并将它们与我的案例相匹配，但我似乎走到了死胡同

目标：网站要求您在文本框中键入任何单词并提交。在提交时，它使用JavaScript生成一个表，将单词分解成字母，并将它们对角放置在表上

当前位置：我成功地将给定的单词发布到JavaScript变量中，从中我可以将单词拆分为单独的字符。我还使用JavaScript生成了一个HTML表，但是如何在其中获取单词呢

我很高兴有一个解决我这个问题的答案，但是如果它生成了表格，并且它的内容按对角线方向如下，则会得到额外的分数：

[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]

function buildTable(word) {
  var s= '<table>';
  word.split('').forEach(function(val, idx) {
    s+= '<tr>'+
        (new Array(idx+2).join('<td>'))+val+
        (new Array(word.length-idx).join('<td>'));
  });
  s+= '</table>';
  document.getElementById('output').innerHTML= s;
} //buildTable

以下是我的代码：

函数printWord（）{
var word=document.getElementById（'word'）。值；
var body=document.getElementsByTagName（'body'）[0]；
var tbl=document.createElement（'table'）；
tbl.style.width='80%'；
tbl.setAttribute（'border'，'1'）；
var tbdy=document.createElement（'tbody'）；
对于（var i=0；i，以下是您的问题的解决方案：


函数generateTable（）{
var$c=document.getElementById（“容器”）；
var$table=document.createElement（'table'）；
var$tbody=document.createElement（'tbody'）；
var word=document.getElementById（'word'）.value.split（“”）；
$c.child（$table）；
$table.appendChild（$tbody）；
对于（var i=0，l=word.length；i，以下是您的问题的解决方案：


函数generateTable（）{
var$c=document.getElementById（“容器”）；
var$table=document.createElement（'table'）；
var$tbody=document.createElement（'tbody'）；
var word=document.getElementById（'word'）.value.split（“”）；
$c.child（$table）；
$table.appendChild（$tbody）；
对于（var i=0，l=word.length；i给你.）。。
我刚刚将逻辑更新到你的代码中，用于打印信件。
试试看


函数printWord（）{
var word=document.getElementById（'word'）。值；
var body=document.getElementsByTagName（'body'）[0]；
var tbl=document.createElement（'table'）；
tbl.style.width='80%'；
tbl.setAttribute（'border'，'1'）；
var tbdy=document.createElement（'tbody'）；
对于（var i=0；i给你.）。。
我刚刚将逻辑更新到你的代码中，用于打印信件。
试试看


函数printWord（）{
var word=document.getElementById（'word'）。值；
var body=document.getElementsByTagName（'body'）[0]；
var tbl=document.createElement（'table'）；
tbl.style.width='80%'；
tbl.setAttribute（'border'，'1'）；
var tbdy=document.createElement（'tbody'）；
对于（var i=0；i试试这个..它简单且易于实现：


函数printWord（）{
var word=document.getElementById（'word'）。值；
var tableObj=''；
对于（var i=0；i试试这个..它简单且易于实现：


函数printWord（）{
var word=document.getElementById（'word'）。值；
var tableObj=''；
对于（var i=0；i，除非有理由单独创建元素，否则可以构建如下HTML字符串：

[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]

function buildTable(word) {
  var s= '<table>';
  word.split('').forEach(function(val, idx) {
    s+= '<tr>'+
        (new Array(idx+2).join('<td>'))+val+
        (new Array(word.length-idx).join('<td>'));
  });
  s+= '</table>';
  document.getElementById('output').innerHTML= s;
} //buildTable

输入一个单词：
除非有理由单独创建元素，否则您可以构建如下HTML字符串：

[ w ] [ - ] [ - ] [ - ]
[ - ] [ O ] [ - ] [ - ]
[ - ] [ - ] [ R ] [ - ]
[ - ] [ - ] [ - ] [ D ]

function buildTable(word) {
  var s= '<table>';
  word.split('').forEach(function(val, idx) {
    s+= '<tr>'+
        (new Array(idx+2).join('<td>'))+val+
        (new Array(word.length-idx).join('<td>'));
  });
  s+= '</table>';
  document.getElementById('output').innerHTML= s;
} //buildTable

输入一个单词：
对word的长度有任何限制吗？您的代码每次提交都会生成3行/2列，如果word的长度为10个字母，该怎么办？这些列不应该等于word的长度吗？至少可以对角放置字母吗？@AwRak对word的长度没有限制，该表生成脚本可能在这种情况下都不太有效n、 但这只是我设法创建的JS生成表的一部分。对word的长度有任何限制吗？您的代码每次提交生成3行/2列，如果word的长度为10个字母，该怎么办？这些列不应该等于word的长度吗？好吧，至少要斜放字母？@AwRak对word的长度没有限制，该表是gen在这种情况下，使用jQuery脚本可能没有那么有效，但这只是我设法创建的JS生成表的一个草稿。在这里使用jQuery不是一个选项，忘了说明这一点。当然，这会使执行此任务更容易，但如果没有其他方法，这是最后一个选项。不过，感谢您的回答。使用jQuery在这里不是一个选项，忘了说明。当然这会使这项任务简单得多，但如果没有其他方法可以完成，这是最后一个选项。不过，谢谢你的回答。谢谢你，这更符合逻辑。但是，它没有实现我的目标，因为它不将任何内容打印到表中，只是为了控制台。@ProDexorite它也正在打印到表中。td.apEndChild（document.createTextNode（word[j]）；这一行代码非常感谢您，这更符合逻辑。但是它没有实现我的目标，因为它没有将任何内容打印到表中，只是为了控制台。@prodeWrite它也正在打印到表中。td.appendChild（document.createTextNode（word[j]）；这一行代码就是这样做的