Question

我已经能够找到解决方案，并根据我的情况进行匹配，但似乎我走到了尽头。

目标：网站要求您在文本框中键入任何字词并提交。在提交时，它会使用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>

感谢任何帮助或提示！

Answer 1

你去.. 我刚刚将逻辑更新到了打印字母的代码中。试试吧。

＆＃13;

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<word.length;i++){
    var tr=document.createElement('tr');
    for(var j=0;j<word.length;j++){
     
       var td=document.createElement('td');
      if(j==i){
       td.appendChild(document.createTextNode(word[j]));
      }
       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));

  }
}

＆＃13;

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

＆＃13;

Answer 2

以下是您的问题的解决方案：

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>

Answer 3

试试这个..它简单易行： Demo JS Fiddle

<script>
function printWord() {

    var word = document.getElementById('word').value;
    var tableObj = '<table border="1">';
    for(var i=0; i<word.length; i++) {

        var rowObj = '<tr>';
        for(var j=0; j<word.length; j++) {

            var cellObj = '<td>';
            if(i == j) {
                cellObj += word.charAt(i);
            } else {
                cellObj += '-';
            }
            cellObj += '</td>';
            rowObj += cellObj;
        }
        rowObj += '</tr>';
        tableObj += rowObj;
    }
    jQuery('#dynaTableContainer').empty();
    jQuery('#dynaTableContainer').append(tableObj);
}
</script>

<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>
        <div id="dynaTableContainer">

        </div>
    </body>
</html>

谢谢，

〜CHANDAN

Answer 4

除非有理由单独创建元素，否则您可以像这样构建HTML字符串：

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

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

table {
  border: 1px solid black;
  border-spacing: 0px;
}

td {
  border: 1px solid #ddd;
  width: 1.5em;
  height: 1.5em;
  text-align: center;
}

Enter a word:
<input id="word" type="text" onchange="buildTable(this.value)">
<div id="output"></div>

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

4 个答案: