我有一个输入，在其中输入一个小的自然数，例如4、然后按回车键后，它会创建一个特殊的方 table (尺寸等于用户输入的数字)。表格后面还有一个按钮(对于这个玩具示例来说应该不是太重要)。
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
<script type="text/javascript">
function createTable(num_rows,num_cols,idString)
{
var theader = '<table class="table table-bordered table-condensed">\n';
var tbody = '';
for( var i=0; i<num_rows;i++)
{
tbody += '<tr>';
for( var j=0; j<num_cols;j++)
{
tbody += '<td><input type="text" class="form-control" /></td>';
}
tbody += '</tr>\n';
}
var tfooter = '</table>';
document.getElementById(idString).innerHTML = theader + tbody + tfooter;
}
</script>
</head>
<body>
Enter Number: <input type="text" name="numberCities"
onChange='createTable(this.value,this.value,"costMatrixDiv")'><br>
Table:
<div id="tableDiv"></div>
<button>I am a Dummy-Button!</button>
</body>
</html>
Plunker 版本:
https://plnkr.co/edit/DWYEbllT2ynihoTreEDY?p=preview
我想要的:在输入数字之前，用户可以看到文本“Table:”以及按钮。但是，我希望这些部分在用户输入之前不存在。
我不想要的:我不想通过函数 createTable(...) 创建文本“Table:”以及带有矩阵的按钮。这将导致这个玩具示例所需的解决方案，但不是我正在处理的更复杂项目的理想解决方案。理想的情况是在“Table:”以及 Button 周围创建一个 div 部分，并采用一种技术使 div 部分在用户输入数字时出现。
谢谢!
最佳答案
奇怪的玩具示例，如果不知道发生了什么以及为什么我们要编写简单的 JS，很难给出一个好的答案，但是:
放置<div id="tableHolder" style="display: none;">表前:和 </div>之后</button> .
然后在你的 onchange 中，你可以这样做:
createTable(...); showHolder(this.value);
在您的脚本中:
function showHolder(value) {
var s = document.getElementById('tableHolder').style;
var newD = value%1 == 0 && value > 0 ? 'block' : 'none';
if(s.display != newD) {
s.display = newD
}
}
关于javascript - 使 div-section 出现基于事件，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37424711/