2021-04-01

简单HTML标签及JavaScript的使用

在页面中插入表格，并实现动态添加表格长度

1.使用<table></table>标签将要定义的表格内容约束在其中，使用<tr></tr>标签约束表格的一行数据，<td></td>标签约束一行中的一列，是表格的最小单元格。静态显示一个表格的代码如下：

<table border="1" cellpadding="">
      <thead>
      <tr>
          <td bgcolor="#00bfff">用户名</td>
          <td bgcolor="red">密码</td>
          <td bgcolor="gray">操作</td>
      </tr>
      </thead>
      <tbody id="1">
      <tr style="background-color: #ff0916">
          <td><input type="text" name="user"></td>
          <td><input type="password" name="pwd"></td>
          <td><button>修改</button></td>
      </tr>
      <tr style="color: deepskyblue;">
          <td><input type="text" name="user"></td>
          <td><input type="password" name="pwd"></td>
          <td><button>修改</button></td>
      </tr>
      <tr></tr>
      </tbody>
  </table>

其中<thread></thread>标签用来组合表格表头内容，搭配<tbody></tbody>标签定义表格主体。

2.使用<script></script>标签在HTML页面中插入一段JavaScript，实现一些动态操作。以动态添加表格的一行为例，代码如下：

  <script>
      var count = 0;
      function add() {
          var add=document.querySelector("tbody[id='1']")
          if(count % 2 == 0) {
              add.innerHTML += '<tr style="background-color: #ff0916"><td><input type="text" name="user"></td>\n' +
                  '<td><input type="password" name="pwd"></td>\n' +
                  '<td><button>修改</button></td></tr>'
          }
          else{
              add.innerHTML += '<tr style="color: deepskyblue;"><td><input type="text" name="user"></td>\n' +
                  '<td><input type="password" name="pwd"></td>\n' +
                  '<td><button>修改</button></td></tr>'
          }
          count ++;
      }
  </script>

使用document对象的querySelector方法按照表格体的id值找到需要插入的位置，使用innerHTML方法插入具体内容。

3.使用<button></button>放置按钮，并设定点击事件：

<button onclick="add()" style="color: red;">添加</button>

在HTML页面插入视频

使用<video></video>标签插入视频：

<video src="test.mp4" width="320" height="240" controls/>

其中使用controls属性可以为用户显示控件，如播放按钮。