使用JavaScript從給定單詞生成HTML表
[英]Generate a HTML table from a given word with JavaScript
問題描述
我已經能夠四處尋找解決方案，並根據自己的情況進行匹配，但看來我走到了盡頭。
目標：網站要求您在文本框中鍵入任何單詞並提交。 在提交時，它通過使用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('\ ')) 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>
感謝任何幫助或提示！
4 個解決方案
解決方案1
3 2015-03-31 11:05:48
隨您去..我剛剛將邏輯更新到了用於打印字母的代碼中。 試試吧。
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)); } }
<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>
解決方案2
1 已采納 2015-03-31 11:03:32
這是您的問題的解決方案：
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>
解決方案3
0 2015-03-31 11:27:51
試試這個..它很容易實現： 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
解決方案4
0 2015-03-31 11:40:07
除非有理由分別創建元素，否則可以構建如下所示的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>
使用API從Javascript生成HTML表（moviedb.org）
[英]Generate Html table from Javascript using API (The moviedb.org)
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.