JavaScript_js隐藏表格列的函数-CSDN博客

本文链接：https://blog.csdn.net/weixin_45731526/article/details/128653706

JavaScript

JavaScript中，函数是一段代码块，通过函数名来调用。
方法是特殊的函数，在对象中的函数被称为方法，通过对象来调用。

函数示例：

function myFunction()
{
    console.log("Hello World!");
}

方法示例：

var obj = {
   name : '张三',
   //将函数赋值给属性，该函数就是方法，属性名称为方法名
   fun : function(){
       console.log(this.name) //this表示当前对象
   }
 }

JavaScript的常用函数

语法：function 函数名(参数1，参数2...){}

使用var来声明变量。函数内声明的变量是局部变量；函数外声明的变量是全局变量。

在<script> 标签中定义客户端脚本：
type：设置脚本的MIME类型，【text/javascript （默认）、text/ecmascript、application/ecmascript、application/javascript、text/vbscript】
src：设置引用的外部脚本的URL
charset：设置外部脚本的字符编码
async：设置外部脚本异步执行
defer：设置外部脚本在页面完成解析后执行

在<script> 标签的src属性中引入外部js文件

一般<script>标签会被放在头部<heand>或尾部<body>中。【script标签放在页面头部和尾部的区别】

JavaScript的全局函数：

parseInt()、parseFloat()、isNaN()、isFinite()、encodeURI()、decodeURI()

JavaScript的常用方法

JavaScript对象及其相应的方法

JavaScript内置对象：Array、String、Boolean、Date、Math、Number、RegExp

Array 对象的方法

reduce()和reduceRight()都是传入一个函数，在这个函数中写对元素要执行的操作，区别在于reduce()是对元素从左到右来执行，而reduceRight()是对元素从右到左来执行。比如将元素相减，reduce是从左开始减，reduceRight是从右开始减。
slice(i,j)：得到一个子数组，[i,j)

filter

过滤数组，留下符合条件的元素，返回一个新的数组
return true 的元素留下，return false的元素被过滤

array.filter(function(currentValue,index,arr), thisValue)

currentValue：当前元素的值
index：当前元素的索引值
arr：当前元素属于的数组对象

示例：

<script>
    const arr = [1, 2, 3];
    const temp = arr.filter((item) => {return item%2});
    console.log(temp)//[1, 3]
</script>

foreach

遍历数组的元素，会修改原数组

array.forEach(callbackFn(currentValue, index, arr), thisValue)

currentValue：当前元素的值
index：当前元素的索引值
arr：当前元素属于的数组对象

示例：

<script>
    const arr = [1, 2, 3];
    arr.forEach((item,index,arr) => {
        arr[index] = index * 2
    })
    console.log(arr) //[0, 2, 4]
</script>

map

处理数组元素，返回一个新数组

array.map(function(currentValue,index,arr), thisValue)

<script>
    const arr = [1, 2, 3];
    const temp = arr.map((item) => {
        return item * 2;
    })
    console.log(temp);//[2, 4, 6]
</script>

find

查找数组中符合条件的第一个元素，找不到则返回undefined

array.find(function(currentValue, index, arr),thisValue)

<script>
    const arr = [1, 12, 3];
    const ele = arr.find((item) => {return item % 2 === 0});
    console.log(ele); // 12
</script>

findIndex

返回数组中符合条件的第一个元素的索引，没有则返回-1

array.findIndex(function(currentValue, index, arr), thisValue)

splice

给数组添加或删除元素，会修改原数组

array.splice(index,howmany,item1,.....,itemX)

index：设置从哪里开始添加/删除元素
howmany：设置要删除多少元素。没有设置则删除index后面的所有元素，可以设置为0
item1, ..., itemX：要添加到数组的新元素

<script>
    const arr = ['g','f','e','b'];
    arr.splice(1,2,'z');
    console.log(arr);//['g','z','b'] → 第一个开始删，删除两个元素后，再添加一个'z'元素
</script>

from

通过给定的对象创建一个数组

Array.from(object, mapFunction, thisValue)

object：要转换为数组的对象
mapFunction：数组中每个元素要调用的函数 
		 -> 给对象生成数组的过程中可以对元素做一些操作
thisValue：映射函数(mapFunction)中的 this 对象

<script>
    const arr = Array.from("abc");
    console.log(arr);//["a", "b", "c"]

    const arr2 = Array.from([1, 2, 3], x => x * 10);
    console.log(arr2);// [10, 20, 30]
</script>

join

将数组转为字符串，可以使用指定的符号分隔数组的元素，默认用逗号分隔

keys

返回一个包含了数组索引的迭代器对象

<script>
    const iterator = arr.keys()
    for (let i = 0;i < arr.length;i++){
        console.log(iterator.next().value)
    }//0 1 2
</script>

String 对象的方法

在这里插入图片描述

JS中双引号和单引号都可以拼接字符串，但是双引号的内容会被解析，单引号的内容不会被解析。

match(regexp)：在字符串内查找满足匹配正则表达式的值并返回

正则表达式写法：/正则表达式/修饰符
修饰符 → i：不区分大小写；
→ g：全局匹配，找到第一个匹配后仍继续查找
→ m：多行匹配
正则表达式：https://www.runoob.com/jsref/jsref-obj-regexp.html

repeat(times)：将字符串拼接指定次数得到一个新的字符串
substr(start,length)：从哪里开始截取，取多少个，返回一个新字符串。开始值可以是负数，表示从尾开始算，比如，-1表示从倒数第一个开始

includes

判断字符串是否包含指定的子字符串，是就返回true，不是就返回false

string.includes(searchvalue, start)

searchvalue：要查找的字符串。
start：设置从哪个位置开始查找，默认为 0。

<script>
    const str = 'Hello World';
    const res = str.includes('World');
    console.log(res) //true
</script>

JavaScript声明变量

JavaScript使用var、let、 const 来声明变量。

1、var 可以先使用再声明。
let、const 必须先声明才能使用。
2、var 允许在同一作用域中重复声明变量，后者会覆盖前者。
let、const 不允许在同一作用域中重复声明变量，会抛出异常。
3、var 可以定义全局变量和局部变量。
let、const 只能定义局部变量，如果定义全局变量使用时值为undefined。
4、const 声明的是只读变量，声明后值不能修改，所以声明时必须初始化。
→ 注意！JavaScript的类型有两种：原始类型和对象类型。对于原始类型，变量中存储的是值，值不能改变就相当于该变量是一个常量。对于对象类型，变量中存储的是地址值，所以地址值不能改变，但是地址指向的内存中的数据是可以变的。

JavaScript的原始类型：String、Number、Boolean、Null、Undefined

未初始化的变量的值就是undefined。

JavaScript的对象

对象也是变量，对象可以包含多个值（多个变量），值以name:value的形式呈现，用大括号将多个值包含起来，多个值用逗号隔开：
var obj = {name:value, name:value, name:value}

访问对象中的属性：

obj.属性名
obj["属性名"]

访问对象的方法：

将函数赋值给对象中的属性，则为对象的方法：name: function(){}，属性名即为方法名。
访问对象的方法：obj.方法名()

HTML DOM 对象

document对象：

https://www.runoob.com/jsref/dom-obj-document.html
document对象是HTML文档的根节点，在脚本中使用document对象可以访问HTML页面中的所有元素。（Javascript是一种脚本语言）

document.getElementById()：根据元素id获取元素对象

元素对象：

在 HTML DOM中，每个东西都是节点：文档本身就是文档对象；所有HTML元素都是元素节点…
元素对象代表着一个HTML元素
元素对象的子节点可以是任意节点：元素节点、属性节点、文本节点、注释节点，NodeList对象代表着节点列表。

元素对象的通用属性和方法：

parentNode：获取父节点
childNodes：获取子节点数组
children：获取子元素节点集合
innerHTML：获取或设置开始标签和结束标签之间的HTML内容
textContent：获取或设置节点的文本内容

JavaScript对table的行、列的增删操作

Table对象：https://www.runoob.com/jsref/dom-obj-table.html

table.rows：得到所有行，数组
table.cells：得到所有单元格，数组
table.insertRow(index)：在指定位置插入行（从0开始）
table.deleteRow(index)：删除指定行（从0开始）
table.createCaption()：创建表格标题，有则返回标题，无则创建标题
table.deleteCaption()：删除表格标题

tr对象：

row.cells：得到当前行的所有单元格，数组
row.rowIndex：得到当前行在表格中的位置
row.insertCell(index)：当前行指定位置处创建单元格标签（从0开始）
row.deleteCell(index)：当前行删除指定位置的单元格（从0开始）

td/th对象：数据/表头单元格对象

cell.cellIndex：得到该单元格在某行的位置
cell.rowSpan：获取或设置单元格横跨的行数，上下合并单元格
cell.colSpan：获取或设置单元格横跨的列数，左右合并单元格

！注意，创建的是空标签，不包含值，要想显示就需要给空标签中填入值。
示例：
（1）删除行和列

<html>
<head></head>
<body>
<table id="table" border="1">
    <tr><td onclick="deleteCol(this)">删除该列</td><td onclick="deleteCol(this)">删除该列</td></tr>
    <tr><td>cell-1</td><td>cell-2</td><td onclick="deleteRow(this)">删除该行</td></tr>
    <tr><td>cell-3</td><td>cell-4</td><td onclick="deleteRow(this)">删除该行</td></tr>
</table>

<script>
    //删除当前行
    function deleteRow(obj){ //td标签对象，单元格对象
        //1. 得到要删除的行
            //1.1 根据单元格对象td得到它的父元素tr行对象
        const rowObj = obj.parentNode; //返回元素的父节点，HTML元素的通用属性
            //1.2 得到行对象的所在行
        const row = rowObj.rowIndex; //返回该行在表中的位置
        //2. 得到表格对象
        const table = document.getElementById("table");
        //3. 删除指定行
        table.deleteRow(row);
    }
    //删除当前列
    function deleteCol(obj){ //td标签对象，单元格对象
        //1. 得到要删除的列
        const col = obj.cellIndex; //返回单元格在某行的的位置
        //2. 获取表格对象
        const table = document.getElementById("table");
        //3. 得到table对象的所有行，数组
        const rows = table.rows;
        //4. 遍历每一行，删除指定列
        for (let i = 0;i < rows.length;i++){
            const row = rows[i];
            row.deleteCell(col);
        }
    }
</script>
</body>
</html>

（2）添加行和列

<script>
    //添加行
    function addRow(obj){ //td标签对象，单元格对象
        //1. 得到要添加的行，加1表示添加在下边
        const rowObj = obj.parentNode;
        const row = rowObj.rowIndex + 1;
        const table = document.getElementById("tableAdd")
        const colNum = rowObj.cells.length;
        //2. 下方插入行，并设置行的高度
        const rowObject = table.insertRow(row);
        rowObject.style = "height:20px";
        //3. 当前行插入同上一行一样数量的单元格
        for (let i = 0;i < colNum;i++){
            let cell = rowObject.insertCell(i);
            // cell.textContent = "new-row-cell-"+i; //设置节点的文本内容，HTML元素的通用属性
        }
    }
    //添加列
    function addCol(obj){ //td标签对象，单元格对象
        //1. 得到要添加的列，加1表示添加在右边
        const col = obj.cellIndex + 1;
        const table = document.getElementById("tableAdd")
        //2. 遍历每一行，在指定位置插入单元格
        for (let i = 0;i < table.rows.length;i++){
            const row = table.rows[i];
            const cell = row.insertCell(col);
            cell.style = "width:40px";
            // cell.textContent = "new-col-cell-"+i;
        }
    }
</script>

JSON

json是一种数据交换格式
json是一个字符串
可以将JavaScript对象转换为JSON，将JSON发送到服务器
可以将从服务器接收到的JSON数据转换为JavaScript对象

JSON语法：

数据以键值对的形式存在，键和值使用冒号隔开
多个键值对之间用逗号隔开
对象使用{}，数组使用[]

注意：

JSON的键必须是字符串，需要使用双引号包住
JSON的值的类型：字符串、数字（整数或浮点数）、JSON对象、数组、布尔、null

JSON和XML：

xml必须使用xml解析器进行解析
json可以通过标准的JavaScript函数进行解析

JSON解析：

var obj = JSON.parse(json); //解析JSON数据，将数据转换为JS对象

利用JSON数据生成table：

<body>
<table id="jsonTable"></table>

<script>
    const json = '[{"name":"wje","age":27,"sex":"man","job":"singer"},{"name":"wje","age":27,"sex":"man","job":"singer"}]';
    //解析JSON
    let data = JSON.parse(json);
    console.log(data,"data");
    //获取表格对象
    const table = document.getElementById("jsonTable");
    table.border = '1';
    if (data !== null && data.length !== 0){ //空字符串 === undefined，长度为0
        //对象的属性是表头
        names = Object.keys(data[0])
        let headRow = table.insertRow(0);
        names.forEach((item,index) => {
            let cell = headRow.insertCell(index);
            cell.textContent = item;
        })
        //数组长度是行数，将对象的值设置到单元格中
        data.forEach((obj,index) => {
            let row = table.insertRow(index+1);
            const values = Object.values(obj);
            values.forEach((item,i) => {
                let cell = row.insertCell(i);
                cell.textContent = item;
            })
        })
    }
</script>
</body>

CSS

学会CSS，知道使用CSS对Table的行列的隐藏显示，背景颜色改变等

CSS：层叠样式表，是一种计算机语言，用来给HTML文档或XML应用添加样式，

html 标签是用来定义页面的内容
css 样式表是用来定义页面的布局、外观，定义html元素如何显示

CSS语法规则：

选择器 + 多条声明；声明 = 属性 + 值；每条声明用分号结束，属性与值直接用冒号分开，多条声明使用大括号包含。选择器 {属性:值; 属性:值;}

选择器是指要选择对其添加样式的html元素
定义css样式：
- 方式一【内联样式】：在html元素的style属性中定义css样式
- 方式二【内部样式表】：在head标签中使用<style></style>标签定义css样式
- 方式三【外部样式表】：在head标签中使用link标签的href属性引入外部的css样式文件
多重样式优先级：内联样式 > 内部样式表 > 外部样式表
- 当一个HTML文档中定义了多种样式，那么属性相同时，优先级高的会覆盖优先级低的；属性不同时会被直接继承
CSS注释： /* */

CSS选择器：

标签选择器、id选择器、类选择器、组合选择器

标签选择器： 标签名 {属性:值;}

用于为某一种标签添加样式

id选择器：#id属性值 {属性:值;}

标签元素使用id属性来引用该样式

类选择器：.class属性值 {属性:值;}

标签元素使用class属性来引用该样式
标签元素使用class属性可以引用多个类选择器，多个选择器之间用空格分开，【<标签 class="选择器1 选择器2">】
可以指定某种标签元素都使用这个类选择器，【标签.class属性名{属性:值;}】

组合选择器：选择器1, 选择器2, ..., 选择器n {属性:值; 属性属性:值;}

多个选择器共用该样式，标签元素引用组合选择器中的不同选择器得到的样式是一样的

CSS常用样式

【https://www.runoob.com/css/css-tutorial.html、https://www.w3school.com.cn/css/index.asp】
背景属性：

background-color：背景颜色【十六进制：#ffffff；rgb：rgb(255,255,255)；颜色名：“white”】
background-image：背景图片【url(‘xxx.jpg’)】
background-repeat：设置背景图片的平铺方式【repeat：默认水平和垂直方向重复平铺填满；no-repeat：图片只显示一次；repeat-x：图片只在水平方向重复平铺；repeat-y：图片只在垂直方向重复平铺；inherit：继承父元素的该属性设置】
background-attachment：设置背景图片是否随页面滚动【scroll：默认随页面滚动；fixed：不会随页面滚动；local：随可滚动元素（overflow:scroll）的内容滚动；…】
background-position：设置图片的位置（水平位置垂直位置）【%、px、top/bottom/left/right/center】，若只定义了一个值，则默认另一个值是居中

文本属性：

color：设置文本颜色
text-align：设置文本的水平对齐方式【left、center、right、inherit、justify（多行文本两端对齐）】
所有CSS文本属性

display属性：
【不同元素display属性的默认值不同】

设置元素的显示类型：
none：隐藏元素，且不占用任何空间；
inline：显示成内联元素，前后不带换行符；
inline-block：显示成行内块元素，前后不带换行符；
block：显示成块级元素，前后带换行符；
list-item：以列表形式显示
table-row：以表格行的形式显示，用于显示<tr>元素
table-cell：以表格单元格的形式显示，用于显示<td>和<th>元素
其他类型

visibility属性：

设置元素是否可见：
hidden：元素不可见，会占用空间；
visible：元素可见，默认值；
collapse：用于表格元素相当于【display:none】，用于其它元素相当于【visibility:hidden】

CSS隐藏显示table的行和列

隐藏行：

<tr style="display: none"></tr>

隐藏列：

<td style="display: none"></td>

js隐藏显示table的行和列：

<script>
    let table = document.getElementById("table");
    //隐藏行
    function hiddenRow(obj) { //td对象
        //行对象
        let rowObj = obj.parentNode;
        // rowObj.style.display = "none";
        rowObj.style = "display:none";
    }
    //隐藏列
    function hiddenCol(obj){ //td对象
        //列索引
        let col = obj.cellIndex;
        let rows = table.rows;
        for (let i = 0;i < rows.length;i++){
            let row = rows[i];
            // row.cells[col].style.display = "none";
            row.cells[col].style = "display: none";
        }
    }
    //显示行
    function showRow(index){
        //行对象
        let rowObj = table.rows[index];
        console.log(rowObj)
        rowObj.style = "display: table-row";
    }
    //显示列
    function showCol(index){
        //列对象
        let rows = table.rows;
        for (let i = 0;i < rows.length;i++){
            let row = rows[i];
            row.cells[index].style = "display: table-cell";
        }
    }
</script>