一、表格
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()
