当前位置： 首页 > article >正文

原生HTML集合

article 2025/1/27 3:57:55

一、表格

1、固定表格

<div class="tablebox">
            <div class="table-container">
              <table id="myTable" border="0" cellspacing="0" cellpadding="0">
                <thead>
                  <tr></tr>
                </thead>
                <tbody></tbody>
              </table>
              <img
                id="noDataImage"
                src="./img/zanwu.svg"
                style="display: none; margin: 20px auto 0"
              />
            </div>
          </div>
      let fixedArr = [
        { name: 'ID', width: 50, val: 'baojia_id' },
        { name: '客户名称', width: 110, val: 'customer_name' },
        { name: '创建时间', width: 110, val: 'created_at' },
        { name: '状态', width: 110, val: 'status_text' },
        { name: '产品种类', width: 110, val: 'category_name' },
        { name: '报价公式', width: 110, val: 'formula_name' },
        { name: '产品', width: 110, val: 'product_name' },
        { name: '报价单名称', width: 110, val: 'baojia_name' },
        { name: '报价日期', width: 110, val: 'quote_date' },
        { name: '备注', width: 150, val: 'remark' },
      ]
      let sessionArr = []

      // 表格头部固定部分
      function table() {
          let htmlth = ''
          sessionArr = fixedArr
          fixedArr.forEach((obj, index) => {
            htmlth +=
              "<th class='tablebox_th1 fixed' width=" +
              obj.width +
              '>' +
              obj.name +
              '</th>'
          })
          tabletr.innerHTML = htmlth
      }
      table()

     //获取数据
function kehu(val) {
        let datas = val
        if (val) {
          $.ajax({
            type: 'GET',
            url: '接口地址',
            data: datas,
            datatype: 'json',
            timeout: 50000, //超时时间设置，单位毫秒
            success: function (data) {
              if (data.success === true) {
                tableData = []
                if (data.data.length === 0) {
                  tabletr.innerHTML = ''
                  table()
                  tabletbody.innerHTML = ''
                  document.getElementById('noDataImage').style.display = 'block'
                } else {
                  tabletr.innerHTML = ''
                  table()
                  tabletbody.innerHTML = ''
                  document.getElementById('noDataImage').style.display = 'none'
                  tableData = data.data
                  var htmlStr = ''

                  // 内容
                  tableData.forEach((obj, index) => {
                    htmlStr += '<tr class="active">'
                    sessionArr.forEach((ele) => {
                      if (ele.val === 'baojia_id') {
                        return (htmlStr +=
                          "<td class='box1 fixed'> <div>" +
                          obj.baojia_id +
                          '</div></td>')
                      } else if (ele.val === 'customer_name') {
                        htmlStr +=
                          "<td class='box1 fixed'> <div>" +
                          obj.customer_name +
                          '</div></td>'
                      } else if (ele.val === 'created_at') {
                        htmlStr +=
                          "<td class='box1 fixed'> <div>" +
                          obj.created_at +
                          '</div></td>'
                      } else if (ele.val === 'status_text') {
                        htmlStr +=
                          "<td class='box1 state fixed'> <div>" +
                          obj.status_text +
                          '</div></td>'
                      } else if (ele.val === 'category_name') {
                        htmlStr +=
                          "<td class='box1 stybox fixed'> <div>" +
                          obj.category_name +
                          '</div></td>'
                      } else if (ele.val === 'formula_name') {
                        htmlStr +=
                          "<td class='box1 stybox fixed'> <div>" +
                          obj.formula_name +
                          '</div></td>'
                      } else if (ele.val === 'product_name') {
                        htmlStr +=
                          "<td class='box1 fixed'>" + obj.product_name + '</td>'
                      } else if (ele.val === 'baojia_name') {
                        htmlStr +=
                          "<td class='box1 fixed'>" + obj.baojia_name + '</td>'
                      } else if (ele.val === 'quote_date') {
                        htmlStr +=
                          "<td class='box1 fixed'>" + obj.quote_date + '</td>'
                      } else if (ele.val === 'remark') {
                        htmlStr +=
                          "<td class='box1 fixed'>" +
                          (obj.remark === null ? '暂无' : obj.remark) +
                          '</td>'
                      }
                    })
                    htmlStr += '</tr>'
                    tabletbody.innerHTML = htmlStr
                  })
                  //表格样式（隔行变色）
                  sutcolor()
                }
              }
            },
            error: function (error) {
              console.log(error)
              // showErrorTips('网络错误')
            },
          })
        }
      }
kehu（val）

2、 动态表格

<div class="tablebox">
            <div class="table-container">
              <table id="myTable" border="0" cellspacing="0" cellpadding="0">
                <thead>
                  <tr></tr>
                </thead>
                <tbody></tbody>
              </table>
              <img
                id="noDataImage"
                src="./img/zanwu.svg"
                style="display: none; margin: 20px auto 0"
              />
            </div>
          </div>
function kehu(val) {
        let datas = val
        if (val) {
          $.ajax({
            type: 'GET',
            url: 'http://39.99.247.200/admin/api/get-quotes/',
            data: datas,
            datatype: 'json',
            timeout: 50000, //超时时间设置，单位毫秒
            success: function (data) {
              if (data.success === true) {
                tableData = []
                if (data.data.length === 0) {
                  tabletr.innerHTML = ''
                  table()
                  tabletbody.innerHTML = ''
                  document.getElementById('noDataImage').style.display = 'block'
                } else {
                  tabletr.innerHTML = ''
                  table()
                  tabletbody.innerHTML = ''
                  document.getElementById('noDataImage').style.display = 'none'
                  tableData = data.data
                  var htmlStr = ''
                  // 动态表头
                  let newArr = []
                  newArr = JSON.parse(readDataFromLocal('tabledynamics'))
                  sessiondynamics = []
                  newArr.forEach((el) => {
                    Object.keys(tableData[0].element_data).forEach((key) => {
                      if (key === el) {
                        sessiondynamics.push(key)
                        const tableth = document.createElement('th')
                        tableth.textContent = key
                        tableth.classList.add('tablebox_th2')
                        tableth.width = 120
                        tabletr.appendChild(tableth)
                      }
                    })
                  })
                  tablethead.appendChild(tabletr)
                  const tr = document.createElement('tr')

                  // 内容
                  tableData.forEach((obj, index) => {
                    htmlStr += '<tr class="active">'
                    sessiondynamics.forEach((obje) => {
                      Object.keys(obj.element_data).forEach((key) => {
                        if (obje === key) {
                          htmlStr +=
                            "<td class='box2'>" +
                            obj.element_data[key] +
                            '</td>'
                        }
                      })
                    })
                    htmlStr += '</tr>'
                    tabletbody.innerHTML = htmlStr
                  })

                  sutcolor()
                }
              }
            },
            error: function (error) {
              console.log(error)
              // showErrorTips('网络错误')
            },
          })
        }
      }
kehu(val)

3、表格的样式

隔行变色

// 创建隔行换色函数
      function sutcolor() {
        // 获取当前tbody内tr的数量，表示为有多少行
        let trs = tabletbody.children

        // 循环行数{
        for (let i = 0; i < trs.length; i++) {
          // 判断当前下标 % 2 取余数 是否等于 1 ，等于1表示奇数{
          if (i % 2 == 1) {
            // 循环行数{
            for (let j = 0; j < trs[i].children.length; j++) {
              if (
                trs[i].children[j].className.includes('box1') ||
                trs[i].children[j].className.includes('box3')
              ) {
                trs[i].children[j].style.backgroundColor = '#dee9ff'
              } else {
                trs[i].children[j].style.backgroundColor = '#f4f7ff'
              }
            }
          } else {
            // 循环行数{
            for (let j = 0; j < trs[i].children.length; j++) {
              if (
                trs[i].children[j].className.includes('box1') ||
                trs[i].children[j].className.includes('box3')
              ) {
                // 给奇数这一行的颜色设置
                trs[i].children[j].style.backgroundColor = '#f4f7ff'
              } else {
                trs[i].children[j].style.backgroundColor = '#fff'
              }
            }
          }
        }
      }

固定前几列

// 固定前面几列
      function stickyTableColumns() {
        const table = document.querySelector('table') // 获取表格元素
        const tbody = table.querySelector('tbody') // 获取tbody元素
        const rows = tbody.querySelectorAll('tr') // 获取所有行
        const ths = table.querySelector('thead tr') // 获取所有表头
        const thCount = table.querySelector('thead tr').childElementCount // 获取表头列数
        //浏览器的宽度是否小于1200px,小于就不固定前几项
        if (window.innerWidth < 1200) {
          // 遍历所有的单元格，为除了前6列的列添加position: sticky样式
          rows.forEach((row) => {
            const cells = row.querySelectorAll('td')
            let width = 0
            // 循环行数{
            for (let j = 0; j < cells.length; j++) {
              cells[j].classList.remove('fixed')
              cells[j].classList.remove('box-shadow1')
            }
          })
          const thcells = ths.querySelectorAll('th')
          thcells[thcells.length - 1].classList.remove('box-shadow1')
        } else {
          // 遍历所有的单元格，为除了前6列的列添加position: sticky样式
          rows.forEach((row) => {
            const cells = row.querySelectorAll('td')
            let width = 0
            // 循环行数{
            for (let j = 0; j < cells.length; j++) {
              if (cells[j].className.includes('box1')) {
                if (j === 0) {
                  cells[j].style.left = 0 + 'px'
                } else {
                  width = width + cells[j - 1].offsetWidth
                  cells[j].style.left = width + 'px'
                }
              }
              // if (cells[j].className.includes('box3')) {
              //   if (j === cells.length - 1) {
              //     cells[j].style.right = 0 + 'px'
              //   }
              // }
            }
          })

          // 遍历表头所有的单元格
          const thcells = ths.querySelectorAll('th')
          let thwidth = 0
          // 循环行数
          for (let j = 0; j < thcells.length; j++) {
            if (thcells[j].className.includes('tablebox_th1')) {
              // thcells[j].classList.add('new-class')
              // document.querySelector('fixed0')
              // thcells[j].style.position = 'sticky'
              if (j === 0) {
                thcells[j].style.left = 0 + 'px'
              } else {
                thwidth = thwidth + thcells[j - 1].offsetWidth
                thcells[j].style.left = thwidth + 'px'
              }
            }
            // if (thcells[j].className.includes('tablebox_th3')) {
            //   if (j === thcells.length - 1) {
            //     thcells[j].style.right = 0 + 'px'
            //   }
            // }
          }
        }
      }

表格高度自适应

// 表格的高度自适应
      function tableheight() {
        //浏览器的宽度是否小于1200px,表格的高度
        if (window.innerWidth < 1200) {
          // tablebox.style.height = 'auto'
          tablebox.style.minHeight = '100'
        } else {
          // let gao = Number(tablebox.offsetTop) + 65
          let gao = Number(tablebox.offsetTop) + 35
          tablebox.style.height = 'calc(100vh - ' + gao + 'px)'
        }
      }
      tableheight()

二、下拉框

1、 select2（可搜索）

 

  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico" /> -->
    <title></title>

    <link
      href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="./js/bootstrap.min.css" rel="stylesheet" />
    <script src="js/bootstrap.min.js"></script>

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css"
    />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>
  </head>
               <div style="margin-right: 15px">
                  <label style="width: 80px"
                    >产品种类
                    <span style="color: red; font-size: 16px">*</span>
                  </label>
                  <select
                    id="category_id"
                    class="selectpicker"
                    style="width: 200px"
                  ></select>
                </div>
<script type="text/javascript">
      //下拉框
      $(function () {
        // 下拉框分类
        var categoriesval = $('#category_id').select2({
          allowClear: true,
          placeholder: '选择',
        })
        var optionVal = null
        categoriesval.val(optionVal).trigger('change')//初始化数据
        categoriesval.change()
      })
      //下拉框监听清除操作。
      $('#category_id').on('select2:clear', function () {
        。。。。
      })
      //下拉框分类的选择后的操作
      $('#category_id').on('change', function () {
        if ($('#category_id').val()) {
          。。。。
        }
      })
</script>

获取下拉框的数据

// 获取分类名称
      function categories() {
        let categoryId = document.querySelector('#category_id')

        $.ajax({
          type: 'GET',
          url: '接口地址',
          datatype: 'json',
          timeout: 50000, //超时时间设置，单位毫秒
          success: function (data) {
            if (data.success === true) {
              let objData = data.data
              let id = null
              var htmlStr = ''
              Object.keys(objData).forEach((key, index) => {
                if (index === 0) {
                  document.querySelector('#category_id').value = key
                  id = key
                }
                htmlStr +=
                  '<option value=' + key + '>' + objData[key] + '</option>'
              })
              categoryId.innerHTML = htmlStr
            }
          },
          error: function (error) {
            console.log(error)
          },
        })
      }

2、下拉框之间联动

<div style="margin-right: 15px">
                  <label style="width: 80px"
                    >产品种类
                    <span style="color: red; font-size: 16px">*</span>
                  </label>
                  <select
                    id="category_id"
                    class="selectpicker"
                    style="width: 200px"
                  ></select>
                </div>
                <div style="margin-right: 10px">
                  <label style="width: 80px"
                    >报价公式
                    <span style="color: red; font-size: 16px">*</span>
                  </label>
                  <select
                    id="formula_id"
                    class="selectpicker"
                    style="width: 200px"
                  ></select>
                </div>
//下拉框
      $(function () {
        // 下拉框分类
        var categoriesval = $('#category_id').select2({
          allowClear: true,
          placeholder: '选择',
        })
        var optionVal = null
        categoriesval.val(optionVal).trigger('change')
        categoriesval.change()

        // 下拉框关联公式
        var formulasval = $('#formula_id').select2({
          allowClear: true,
          placeholder: '选择',
        })
        formulasval.val(optionVal).trigger('change')
        formulasval.change()      })
      //下拉框分类监听清除操作。
      $('#category_id').on('select2:clear', function () {
        $('#formula_id').empty()
      })
      //下拉框分类的选择后，其余下拉框接口重新调用
      $('#category_id').on('change', function () {
        if ($('#category_id').val()) {
          formulas(Number($('#category_id').val()))
        }
      })


http://www.kler.cn/a/518438.html

相关文章：

  • 数据结构与算法再探（六）动态规划
  • JVM学习指南(48)-JVM即时编译
  • 第20篇：Python 开发进阶：使用Django进行Web开发详解
  • 使用 Elasticsearch 导航检索增强生成图表
  • MySQL入门（数据库、数据表、数据、字段的操作以及查询相关sql语法）
  • Angular 2 表单深度解析
  • Spring Security(maven项目) 3.0.2.7版本
  • ray.rllib 入门实践-3： 配置参数列表
  • 深圳云盟智慧科技公司智慧停车管理系统GetVideo存在SQL注入漏洞
  • Java 中如何使用 SSL 连接 IoTDB
  • 蓝桥动态规划（dp）题目讲解
  • 【漫话机器学习系列】059.特征选择策略（Feature Selection Strategies）
  • ESP32S3基于espidf lvgl驱动i2c ssd1306/sh1106/7屏幕使用
  • Elastic Cloud Serverless 获得主要合规认证
  • 设计模式概述 - 设计模式的重要性
  • Linux lsblk 命令详解
  • 金融级分布式数据库如何优化？PawSQL发布OceanBase专项调优指南
  • 高级 SQL 优化：让查询飞起来
  • 1.24 共享内存和信号灯集
  • SSM框架探秘：Spring 整合 SpringMVC 框架
  • 神经网络基础 | 给定条件下推导对应的卷积层参数
  • 图神经网络系列论文阅读DAY1：《Predicting Tweet Engagement with Graph Neural Networks》
  • tomcat的accept-count、max-connections、max-threads三个参数的含义
  • 【openwrt】openwrt odhcpd IPv6 prefix_filter选项说明
  • Google Protocol Buffers的.NET与Python
  • Python之百度财务数据可视化分析