Javascript 通过单击按钮创建表格
这是我想做的。希望不会太难 我需要创建一个表,每个td中都有一个div,它是通过单击按钮创建的。。。比如说 请选择表中的行数 请选择表中的列数 结果: 因此,如果单击4和4,它将创建一个表4x4。如果单击3x1,您将创建一个表3x1,等等 任何帮助都将不胜感激 这是我想做的一件事。我还在看你的评论Javascript 通过单击按钮创建表格,javascript,html,button,tabular,Javascript,Html,Button,Tabular,这是我想做的。希望不会太难 我需要创建一个表,每个td中都有一个div,它是通过单击按钮创建的。。。比如说 请选择表中的行数 请选择表中的列数 结果: 因此,如果单击4和4,它将创建一个表4x4。如果单击3x1,您将创建一个表3x1,等等 任何帮助都将不胜感激 这是我想做的一件事。我还在看你的评论 我知道我需要在Javascript中添加如何通过id获取元素。我将使用两种形式,一种用于最上面一行数字,另一种用于第二行数字,其中每个数字都是用户输入的预定义值 对于每个表单,使用javascript
我知道我需要在Javascript中添加如何通过id获取元素。我将使用两种形式,一种用于最上面一行数字,另一种用于第二行数字,其中每个数字都是用户输入的预定义值 对于每个表单,使用javascript将submit按钮分配给每个数字,然后从中使用javascript获取结果,并执行完成任务所需的代码/脚本 我建议为此使用jquery
玩得开心…您应该能够通过一些非常简单的if语句或开关来实现这一点 如果有两个变量行和列
//loop for number of rows
for "x" number of rows{
document.write("<tr>");
if(columns > 0)
{
switch statement to output column
1: document.write("<td></td>");
2: document.write("<td></td><td></td>");
}
document.write("</tr>");
}
这里的语法非常虚化,这段代码不起作用,但它可能会让您开始,一旦有了表,您到底想对它做什么?使用javascript,有两个局部变量:宽度和高度。在每个DIV中,有一个onclick函数将该值分配给适当的变量,然后检查这两个变量是否都以这种方式分配,可以先单击高度或宽度。如果两者都是,则在for循环中使用以下变量在javascript中生成HTML代码: var HTML= forvar i=0;i<身高;我++ {HTML+= forvar j=0;j
document.getElementById'where\u you\u want\u the\u table'。innerHTML=HTML 这是经过测试的,值得注意的是,如果他们一次又一次地尝试构建表,它将无法处理,它将不断添加列和行,但我会让您处理这一点:
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
var Rows = 0;
var ColString = "";
var TableBuilder;
$(document).ready(function () {
$("#Rows input").click(function () { Rows = $(this).val(); });
$("#Cols input").click(buildCols);
$("#Submit").click(CreateTable);
});
function buildCols() {
for (i = 0; i < $(this).val(); i++) {
ColString = ColString + "<td></td>";
}
return ColString;
}
function CreateTable() {
if (Rows == 0 || ColString == "") {
$("#PleaseSelect").removeClass("displayNone");
}
else {
for (i = 0; i < Rows; i++) {
TableBuilder = TableBuilder + "<tr>" + ColString + "</tr>";
}
$("#table tbody").html(TableBuilder);
}
}
</script>
<style type="text/css">
.displayNone { display: none; }
</style>
</head>
<body>
<table id="table" border="1">
<tbody>
</tbody>
</table>
<br><br>
How many Rows?
<div id="Rows">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<br />
How Many Columns?
<div id="Cols">
<input type="button" value="1" >
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="4">
</div>
<br />
<div id="PleaseSelect" class="displayNone">Please select both a column number and a row number.</div>
<input type="button" id="Submit" value="Build Table" />
</body>
</html>
不要期望任何人为你做所有的工作。你在这方面遇到了什么问题?你被困在哪里了?攻击的基本向量是将事件处理程序绑定到按钮,当两个选项都选择了一个值时,生成表。或者添加创建按钮,并在基于选定值单击时处理表创建。这对前端工程师来说确实是一个很好的面试问题,因为我不希望有人替我做所有的工作。除了这个零件,我什么都能用。现在我只是使用html来处理表格,但我需要能够有大约30种不同的表格大小。我尝试过添加和删除列以及在多个表之间切换,但每次都遇到问题。这是我能想到的最好的方法。我只是不知道从哪里开始。看起来我这里有很多东西可以帮助我开始。。。谢谢