• Javascript知识【元素内容体实操案例】

    目录

    1，案例：元素内容体操作

    1.1：案例

    1.2：思考【进阶+】

    1，案例：元素内容体操作

    1.1：案例

    需求：

    追加的行：末尾序号需要递增的  如果序号以及1，2，再次追加，行序号为3

    追加的头：追加的头部，序号必须为1

    姓名和年龄必须通过输入框输入

     

    1. 分析：

    关键点：

    1. 追加操作： +=     
    2. 输入框弹出两次分别接受姓名和年龄

    步骤：

    一、为按钮点击onclick点击事件

    二、编写点击事件的监听器

    //1、获取表格对象

    //2、通过输入框，获取姓名和年龄

    //3、拼接要追加的字符串，序号从3开始自增

    //4、将整理好的字符串 追加到表格内容体末尾

    1. 代码实现：
    2. \n" +
                  "            \n" +
                  "            \n" +
                  "            \n" +
                  "        ";
              //4、将整理好的字符串 追加到表格内容体末尾
              t1.innerHTML+=str;
          }
      script>

      head>
      <body>

          <input type="button" value="点我向末尾追加一行" onclick="addDataToLast()"/>
          <input type="button" value="思考：点我向头部追加一行"/>
          <table id="t1" style="width:500px;background-color: pink;border:1px dashed blue;">
              <caption>
                  内容体表格
              caption>
              <tr>
                  <th>序号th>
                  <th>姓名th>
                  <th>年龄th>
              tr>
              <tr>
                  <td>1td>
                  <td>XXXtd>
                  <td>19td>
              tr>
              <tr>
                  <td>2td>
                  <td>XXXtd>
                  <td>19td>
              tr>
          table>
      body>
      html>

      html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>Titletitle>
          <style>
              tr{
                  text-align: center;
              }
          style>

      <script>
          var num = 3;
          //向表格末尾追加数据
          function addDataToLast() {
              //1、获取表格对象
              var t1 = document.getElementById("t1");
              //2、通过输入框，获取姓名和年龄
              var name = prompt("请输入姓名：");
              var age = prompt("请输入年龄：");
              //3、拼接要追加的字符串，序号从3开始自增
              var str = "

      "+ num++ +""+name+""+age+"

    1.2：思考【进阶+】

    1. 分析：

    关键点:

    1. 头部内容体追加：

    元素.innerHTML = "字符串"+元素.innerHTML;

    1. 获取指定标签的元素数组:

    //根据标签名获取指定的元素 数组。 获取不到。返回空数组

    var arr = document.getElementsByTagName("标签名");

    进行行下的单元格操作 

     

    步骤：

    • 为按钮绑定点击事件
    • 编写点击事件监听器代码

    //1、获取表格对象

    //2、输入姓名和年龄

    //3、定义字符串str，作为表格的新内容体

    //4、str拼接表格的头部和表头

    //5、向str中，拼接一条新行数据（序号必须为1）

    //6、获取所有的tr标签

    //7、遍历所有tr标签，索引从1

    //8、遍历中，取出当前tr，修改当前tr第一个单元格数据，在原有基础上+1

    //9、修改完成，将该tr的内容体追加到str末位

    //10、为表格内容体设置新数据为str

     代码实现：

    \n" +
                    "            \n" +
                    "            \n" +
                    "            \n" +
                    "        ";
                //4、将整理好的字符串 追加到表格内容体末尾
                t1.innerHTML+=str;
            }
            //向表格头部追加数据
            function addDataToFirst() {
                //1、获取表格对象
                var t1 = document.getElementById("t1");
                //2、输入姓名和年龄
                var name = prompt("请输入姓名：");
                var age = prompt("请输入年龄：");
                //3、定义字符串str，作为表格的新内容体
                var str = "";
                //4、str拼接表格的头部和表头
                str+="\n" +
                    "        \n" +
                    "            \n" +
                    "            \n" +
                    "            \n" +
                    "        ";
                //5、向str中，拼接一条新行数据（序号必须为1）
                str+="\n" +
                    "            \n" +
                    "            \n" +
                    "            \n" +
                    "        ";
                //6、获取所有的tr标签
                var trArr = document.getElementsByTagName("tr");
                //7、遍历所有tr标签，索引从1
                for (var i = 1; i <trArr.length ; i++) {
                    //8、遍历中，取出当前tr，修改当前tr第一个单元格数据，在原有基础上+1
                    var td = trArr[i].cells[0];
                    td.innerHTML = parseInt(td.innerHTML)+1;
                    //9、修改完成，将该tr的内容体追加到str末位
                    str+=""+trArr[i].innerHTML+"";
                }

                //10、为表格内容体设置新数据为str
                t1.innerHTML = str;
                num++;//只要加一行，num一定要++
            }
        script>
    head>
    <body>

        <input type="button" value="点我向末尾追加一行" onclick="addDataToLast()"/>
        <input type="button" value="思考：点我向头部追加一行" onclick="addDataToFirst()"/>
        <table id="t1" style="width:500px;background-color: pink;border:1px dashed blue;">
            <caption>
                内容体表格
            caption>
            <tr>
                <th>序号th>
                <th>姓名th>
                <th>年龄th>
            tr>
            <tr>
                <td>1td>
                <td>XXXtd>
                <td>19td>
            tr>
            <tr>
                <td>2td>
                <td>XXXtd>
                <td>19td>
            tr>
        table>
    body>
    html>

    html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Titletitle>
        <style>
            tr{
                text-align: center;
            }
        style>
        <script>
            var num = 3;
            //向表格末尾追加数据
            function addDataToLast() {
                //1、获取表格对象
                var t1 = document.getElementById("t1");
                //2、通过输入框，获取姓名和年龄
                var name = prompt("请输入姓名：");
                var age = prompt("请输入年龄：");
                //3、拼接要追加的字符串，序号从3开始自增
                var str = "

    "+ num++ +""+name+""+age+"
    \n" +
                    "            内容体表格\n" +
                    "        
    序号姓名年龄
    1"+name+""+age+"
  • 相关阅读:
    Notepad2 v4.22.11r4478 开源轻量级文本编辑软件
    VD6283TX环境光传感器驱动开发(4)----移植闪烁频率代码
    手把手教你Nginx常用模块详解之ngx_http_addition_module(二)
    Linux命令入门教程(四)：文本编辑篇
    DockerFile解析
    pandas通过DatetimeProperties对象获取日期对象是否是所在季度的第一天（is quarter start）
    SoftwareTest3 - 要了人命的Bug
    VCSEL和VCSEL阵列仿真
    一段代码让你了解Java中的抽象
    6-JS的Fetch 跨域问题
  • 原文地址：https://blog.csdn.net/m0_64550837/article/details/126213115