如何在HTML中创建表格网页的简单表单？

问题描述：

我正在从我的工作计算机上运行一个简单的网页。绝大多数网站在我的工作计算机上被阻止，所以我希望能够使用HTML + CSS + Javascript的简单组合完成此任务。如何在HTML中创建表格网页的简单表单？

这个想法是，用户为他感兴趣的考试选择多个复选框，然后他点击“生成工作表”按钮，该工具栏将打开一个单独的选项卡，该选项卡仅显示所选考试的休息时间表。

我已经开始研究代码的基础知识，但是我不断收到一些使我无法继续前进的错误。

谷歌Chrome浏览器的控制台调试器给了我以下错误：

未捕获的SyntaxError：无效的或意外的标记（forAcey.html：59）
未捕获的ReferenceError：检查在HTMLButtonElement.onclick没有定义（ forAcey.html：33）

单击“生成工作表”按钮时显示第二个错误。

你能帮我们弄清楚我的错误在哪里以及如何纠正它们？

此外，您是否有任何改进我的代码的提示？

我附上了我的代码片段。

<html> 
 

 
<head> 
 
\t <title>Break Schedules</title> 
 
\t 
 
\t <!-- Style --> 
 
\t <link rel="stylesheet" href="forAcey.css"/> \t 
 
\t 
 
\t <!-- Scripts --> 
 
\t <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> \t 
 
</head> 
 

 
<body> 
 
\t <h2>Break Schedules</h2> 
 

 
\t <!-- Form --> 
 
\t <div> 
 
\t \t <form id="DateForm"> 
 
\t \t \t <b>Date:</b> 
 
\t \t \t <input id=DateID type="Date" name="myDate"><br> 
 
\t \t </form> 
 
\t \t 
 
\t \t <h4>Check off the exams you need.</h4> 
 
\t \t 
 
\t \t <div> 
 
\t \t \t <form id="CheckForm"> 
 
\t \t \t \t <input type = "checkbox" id="exam1" name="exam1" value="exam1">exam1<br> 
 
\t \t \t \t <input type = "checkbox" id="exam2" name="exam2" value="exam2">exam2<br> 
 
\t \t \t \t <input type = "checkbox" id="exam3" name="exam3" value="exam3">exam3<br> 
 
\t \t \t </form> \t 
 
\t \t </div> 
 
\t \t 
 
\t \t <button onclick="Checks()">Generate Sheet</button><br>&nbsp<br> 
 
\t \t <button onclick="location.reload()">Reset Form</button> 
 
\t </div> 
 
\t 
 
\t <script> 
 
\t \t $(document).keydown(function(e){ 
 
\t \t \t if (e.keyCode == 13) { 
 
\t \t \t \t Checks(); 
 
\t \t \t return false; 
 
\t \t \t } 
 
\t \t }); 
 
\t \t 
 
\t \t function Checks(){ \t \t \t 
 
\t \t <!-- Date --> 
 
\t \t var x = document.getElementById("DateForm"); 
 
\t \t var The_Date = ""; 
 
\t \t var i; 
 
\t \t for (i = 0; i < x.length ;i++) { 
 
\t \t \t The_Date += x.elements[i].value + "<br>"; 
 
\t \t } 
 
\t } 
 

 
\t var checkexam1=document.getElementById("exam1").checked; 
 
\t var checkexam2=document.getElementById("exam2").checked; 
 
\t var checkexam3=document.getElementById("exam3").checked; 
 
\t 
 
\t final_string="<html><h2>"+The_Date+"</h2> 
 
\t 
 
\t if (exam1==true){ 
 
       final_string+="<tr><td>exam1</td><td>this is the break schedule for exam1</td></tr>"; 
 
      } 
 
\t if (exam2==true){ 
 
       final_string+="<tr><td>STEP 1-2-3</td><td>this is the break schedule for exam2</td></tr>"; 
 
      } 
 
\t if (exam3==true){ 
 
       final_string+="<tr><td>PMI</td><td>this is the break schedule for exam3</td></tr>"; 
 
      } 
 
\t 
 
\t final_string+="</table></html>" 
 
      var new_page=window.open('','name'); 
 
      new_page.document.write(final_string); 
 
      new_page.document.close(); 
 

 
\t 
 
\t </script 
 
</body> 
 
</html>

很快，我看到你有多行字符串，这是不允许在JavaScript（事实上，它是允许的，但你必须使用反向和IE浏览器的兼容性问题）。 –

我该如何使用反引号来编写该代码？ – Acey

«'... ...'»检查此链接https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Template_literals –

答

有脚本几个错误。

结束脚本标记没有正确关闭：</script应该是</script>。
函数Checks应该包含它下面的所有内容，否则当页面加载时执行Checks下面的脚本部分。
而不是测试exam1 == true，您需要测试checkexam1 == true，因为这是您的变量被称为。使用严格的相等运算符是安全的：checkexam1 === true。
没有开始<table>标签。

下面是更正脚本：

$(document).keydown(function(e) { 
    if (e.keyCode == 13) { 
    Checks(); 
    return false; 
    } 
}); 

function Checks() { 
    <!-- Date --> 
    var x = document.getElementById("DateForm"); 
    var The_Date = ""; 
    var i; 
    for (i = 0; i < x.length; i++) { 
    The_Date += x.elements[i].value + "<br>"; 
    } 

    var checkexam1 = document.getElementById("exam1").checked; 
    var checkexam2 = document.getElementById("exam2").checked; 
    var checkexam3 = document.getElementById("exam3").checked; 

    var final_string = "<html><h2>" + The_Date + "</h2><table>"; 

    if (checkexam1 === true) { 
    final_string += "<tr><td>exam1</td><td>this is the break schedule for exam1</td></tr>"; 
    } 
    if (checkexam2 === true) { 
    final_string += "<tr><td>STEP 1-2-3</td><td>this is the break schedule for exam2</td></tr>"; 
    } 
    if (checkexam3 === true) { 
    final_string += "<tr><td>PMI</td><td>this is the break schedule for exam3</td></tr>"; 
    } 

    final_string += "</table></html>"; 
    var new_page = window.open('', 'name'); 
    new_page.document.body.innerHTML = final_string; 
    new_page.document.close(); 
}

查看工作演示：http://plnkr.co/LewFZ4uD4T3SOPNI6iPL

而且不要忘了失踪>添加到结束脚本标签！

Additionally, do you have any tips for improving my code in general?

由于您已经在使用jQuery，所以了解如何直接操作元素而不是创建HTML标记字符串将会非常有用。您可以通过jQuery Learning Center了解更多，尤其是Manipulating Elements的部分。

如何在HTML中创建表格网页的简单表单？

相关推荐