【JavaScript】动态表格

在下小吉.

已于 2023-08-23 13:21:29 修改

阅读量1.7k

点赞数 6

分类专栏：前端易错合集文章标签： javascript 前端 html

于 2023-04-25 21:27:03 首次发布

本文链接：https://blog.csdn.net/m0_72853403/article/details/130374297

版权

前端易错合集专栏收录该内容

8 篇文章 0 订阅

订阅专栏

🎊专栏【前端易错合集】

🍔喜欢的诗句：更喜岷山千里雪三军过后尽开颜。

🎆音乐分享【如愿】

大一同学小吉，欢迎并且感谢大家指出我的问题🥰

🍔介绍

就是在输入框中输入数字后，再按下按钮，系统会自动出现表格

🍔代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=edge">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Document</title>



<style>
fieldset,#d1 {
padding: 10px;
width: 300px;
margin: 0 auto;
}
</style>


<script type="text/javascript">
function createTable(){
n=1;
var str="<table width='100%' border='1' cellspacing='0' cellpadding='0'><tbody>";
// 获取用户输入的行数和列数
var r1=document.getElementById("row").value;
var c1=document.getElementById("col").value;
// 构建一个简单的HTML表格
for(i=0;i<r1;i++)
{
str=str+"<tr align='center'>";
for(j=0;j<c1;j++)
{
str=str+"<td>"+(n++)+"</td>";
}
str=str+"</tr>";
}
// 将生成的表格插入到id为“d1”的div元素中
var d1=document.getElementById("d1");
d1.innerHTML=str+"</tbody></table>";
}
</script>
</head>


<body>
<form id="form1" name="form1" method="post" action="">
<fieldset>
<legend>按时</legend>


输入表格的行数:<input type="text" id="row" ><br>
输入表格的列数:<input type="text" id="col" ><br>


<input type="button" id="ok" value="产生表格" οnclick="createTable()"/>
</fieldset>
</form>


<div id="d1"></div>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    fieldset,#d1 {
      padding: 10px;
      width: 300px;
      margin: 0 auto;
    }
  </style>
  <script type="text/javascript">
    function createTable(){
      n=1;
      var str="<table width='100%' border='1' cellspacing='0' cellpadding='0'><tbody>";
      var r1=document.getElementById("row").value;
      var c1=document.getElementById("col").value;
      for(i=0;i<r1;i++)
      {
        str=str+"<tr align='center'>";
        for(j=0;j<c1;j++)
        {
          str=str+"<td>"+(n++)+"</td>";
        }
        str=str+"</tr>";
      }
      var d1=document.getElementById("d1");
      d1.innerHTML=str+"</tbody></table>";
    }
  </script>
</head>
<body>
  <form id="form1" name="form1" method="post" action="">
    <fieldset>
      <legend>按时</legend>
      
      输入表格的行数:<input type="text" id="row" placeholder="请输入表格的行数" required autofocus><br>
      输入表格的列数:<input type="text" id="col" placeholder="请输入表格的列数" required autofocus><br>
      <input type="button" id="ok" value="产生表格" onclick="createTable()"/>
    </fieldset>
  </form>
  <div id="d1"></div>
</body>
</html>

🎄注意

str=str+"<td>"+(n++)+"</td>";

<td> 两侧要有""

中间的(n++)两边没有“”

🍔解释

🎈为什么要用”str+“

"str+" 的作用是将字符串连接起来。在代码中，使用 "str+" 将每一行的 HTML 字符串拼接起来，最终生成完整的 HTML 表格。

在实现动态生成表格功能时，需要不断拼接 HTML 代码并不断更新页面内容。对于 JavaScript 来说，每次更新 HTML 代码都需要重新构建整个 HTML 结构，这非常费时且容易出错。而使用 "str+" 可以更加高效、方便地拼接字符串，目的是为了减少代码的复杂性和提高代码的执行效率。

因此，在上述代码中，使用 str+ 将表格的每一行 HTML 代码拼接起来，最终生成完整的 HTML 表格，并将其插入到 id 为 "d1" 的 div 元素中。

🎈d1.innerHTML

这个d1.innerHTML不能改为别的东西

d1.innerHTML 的作用是设置或获取指定元素中包含的 HTML 内容。在上述代码中，使用 d1.innerHTML 将包含完整 HTML 表格的字符串插入到 id 为 "d1" 的 div 元素中。

具体来说，d1 是一个代表 id 为 "d1" 的 div 元素的变量，在函数 createTable() 中使用 getElementById() 方法获取。然后，在生成完整的 HTML 表格的过程中，将其保存在一个名为 str 的 JavaScript 变量中。最后，将 str 中保存的 HTML 字符串使用 d1.innerHTML = str 的方式插入到 id 为 "d1" 的 div 元素中，从而实现将动态生成的表格显示在页面上的效果。

总之，使用 d1.innerHTML = str 可以非常方便地将动态生成的 HTML 代码插入到指定的元素中，从而实现动态修改网页内容的效果。