JS-项目实战-新增水果库存功能实现

news2024/11/27 6:34:37

1、fruit.js

function $(name) {
    if (name) {
        //假设name是  #fruit_tbl
        if (name.startsWith("#")) {
            name = name.substring(1);   //fruit_tbl
            return document.getElementById(name);
        } else {
            return document.getElementsByName(name);  //返回的是NodeList类型
        }
    }
}

//当页面加载完成后执行后面的匿名函数
window.onload = function () {
    //get:获取     Element:元素    By:通过...方式
    //getElementById()根据id值获
    let fruitTbl = $("#fruit_tbl");
    //table.rows:获取这个表格的所有的行,返回数组
    let rows = fruitTbl.rows;
    //从 1 开始,因为 第 0 行是表头,不需要绑定事件
    for (let i = 1; i < rows.length - 1; i++) {
        let tr = rows[i];
        //事件动态绑定
        tr.onmouseover = showBGColor;
        tr.onmouseout = clearBGColor;

        //cell:单元格、细胞
        //获取这一行的所有的单元格
        let tds = tr.cells;
        let priceTD = tds[2];
        //绑定鼠标悬浮事件
        priceTD.onmouseover = showHand;

        //绑定点击事件
        priceTD.onclick = editPrice

        //给删除小图标绑定鼠标悬浮和点击事件
        let delImgTd = tds[5];
        let delImg = delImgTd.firstChild;
        delImg.onmouseover = showHand;
        delImg.onclick = delFruit;
    }
    zj();

    //获取全选这个复选框
    let ckAll = $("#ckAll");
    ckAll.onchange = myCkAll;

    //获取所有的普通复选框
    let ckArr = $("ck");
    ckArr.forEach((item, index) => {
        item.onchange = myCk;
    });

    //给批量删除按钮绑定点击事件
    const delsBtn = $("#delsBtn");
    delsBtn.onclick = delFruits;

    //绑定添加按钮的点击事件
    //添加按钮有两个功能:1、新增   2、修改
    $("#addFruit").onclick = addOrUpdateFruit;
};
addOrUpdateFruit = function () {
    let fname = $("#fname").value;
    let price = parseInt($("#price").value);
    let fcount = parseInt($("#fcount").value);
    let xj = price * fcount;

    let fruitTbl = $("#fruit_tbl");
    //第 1 步:新增一行
    //insertRow()会在表格中插入一行,不带参数时在末尾插入
    //insertRow(1)会在索引为1的位置插入一个新行
    let tr = fruitTbl.insertRow(fruitTbl.rows.length - 1);
    //insertCell()插入单元格
    let ckTD = tr.insertCell();
    let fnameTD = tr.insertCell();
    let priceTD = tr.insertCell();
    let fcountTD = tr.insertCell();
    let xjTD = tr.insertCell();
    let delImgTD = tr.insertCell();

    //第 2 步:向每一个单元格填充内容
    ckTD.innerHTML = "<input type='checkbox' name='ck'/>";
    fnameTD.innerText = fname;
    priceTD.innerText = price;
    fcountTD.innerText = fcount;
    xjTD.innerText = xj;
    delImgTD.innerHTML = "<img src='imgs/del.png' class='delBtn'/>";

    //第 3 步:绑定相关事件
    //给新的这一行绑定鼠标悬浮和离开事件
    tr.onmouseover = showBGColor;
    tr.onmouseout = clearBGColor;
    //给复选框绑定状态改变事件
    ckTD.firstChild.onchange = myCk;
    //给单价单元格绑定鼠标悬浮以及点击事件
    priceTD.onmouseover = showHand;
    priceTD.onclick = editPrice;
    //给删除小图标绑定鼠标悬浮以及点击事件
    let imgBtn = delImgTD.firstChild;
    imgBtn.onmouseover = showHand;
    imgBtn.onclick = delFruit;

    zj();
};
delFruits = function () {
    if (confirm("是否确认批量删除?")) {
        let fruitTbl = $("#fruit_tbl");
        let rows = fruitTbl.rows;
        let ckArr = $("ck");
        // for (let i = rows.length - 3; i >= 0; i--) {
        //     if (ckArr[i].checked) {
        //        fruitTbl.deleteRow(i + 1);
        //     }
        // }

        for (let i = rows.length - 3; i >= 0; i--) {
            if (ckArr[i].checked) {
                let rowIndex = ckArr[i].parentElement.parentElement.rowIndex;
                fruitTbl.deleteRow(rowIndex);
            }
        }
        zj();
    }
};
myCk = function () {
    let ck = event.srcElement;
    if (!ck.checked) { //说明是取消选中,则全选这个复选框一定是不选中的
        $("#ckAll").checked = false;
    } else {
        let ckArr = $("ck");

        //NodeList 转化成 Array 的三种解决方法:
        // 1、
        //let ckArr2 = Array.prototype.slice.call(ckArr);
        //$("#ckAll").checked = ckArr2.every(item => item.checked);

        //2、
        //$("#ckAll").checked = [...ckArr].every(item => item.checked);

        //3、
        let ckArr2 = Array.from(ckArr);
        $("#ckAll").checked = ckArr2.every(item => item.checked);

        //4、直接使用for循环,遍历NodeList
        // let flag = true;
        // for (let i = 0; i < ckArr.length; i++) {
        //     if (!ckArr[i].checked) {
        //         flag = false;
        //         break;
        //     }
        // }
        // $("#ckAll").checked = flag;
    }
};
myCkAll = function () {
    let ckAll = $("#ckAll");
    let flag = ckAll.checked;
    //debugger
    let ckArr = $("ck");
    for (let i = 0; i < ckArr.length; i++) {
        ckArr[i].checked = flag;
    }
};
delFruit = function () {
    if (window.confirm("是否删除?")) {
        let fruitTbl = $("#fruit_tbl");
        let delImg = event.srcElement;
        if (delImg && delImg.tagName == "IMG") {
            let tr = delImg.parentElement.parentElement;
            //tr.rowIndex获取当前tr这一行的行索引
            let rowIndex = tr.rowIndex;
            //table对象有一个方法:deleteRow,能够删除指定索引位置的行
            fruitTbl.deleteRow(rowIndex);
            //重新计算总计
            zj();
        }
    }
};
editPrice = function () {
    let priceTD = event.srcElement;
    //inner:在...内部

    let oldPrice = priceTD.innerText;

    //innerHTML:在节点内部填充一段HTML代码
    //priceTD.innerHTML = "<input type='text' size='2' value='"+oldPrice+"'/>";
    priceTD.innerHTML = "<input type='text' size='2'/>";
    /**
     * <td><input type="text" size="2"/></td>
     * first:第一个 child:孩子
     * firstChild:第一个子节点
     * @type {ActiveX.IXMLDOMNode | ChildNode | (() => (Node | null))}
     */
    let priceInput = priceTD.firstChild;
    priceInput.value = oldPrice;

    priceInput.select();

    //绑定失去焦点事件
    priceInput.onblur = updatePrice;

    //输入框绑定键盘摁下事件,用于判断摁下的值是否合法
    priceInput.onkeydown = ckInput;
};
ckInput = function () {
    // 0-9:48-57    backspace:8    enter:13
    let kc = event.keyCode;
    if (!((kc >= 48 && kc <= 57) || kc == 8 || kc == 13)) {
        //取消事件
        event.returnValue = false;
    }
    if (kc == 13) {
        event.srcElement.blur();
    }
};
updatePrice = function () {
    let priceInput = event.srcElement;
    let newPrice = priceInput.value;
    let priceTD = priceInput.parentElement;
    priceTD.innerText = newPrice;

    xj(priceTD.parentElement)
};
xj = function (tr) {
    if (tr && tr.tagName == "TR") {
        let tds = tr.cells;
        let priceTD = tds[2];
        let fcountTD = tds[3];
        let xjTD = tds[4];

        let price = parseInt(priceTD.innerText);
        let fcount = parseInt(fcountTD.innerText);
        let xj = price * fcount;

        xjTD.innerText = xj;

        //同时更新总计
        zj();
    }
};
zj = function () {
    let fruitTbl = $("#fruit_tbl");
    let rows = fruitTbl.rows;
    let total = 0;
    for (let i = 1; i < rows.length - 1; i++) {
        let tr = rows[i];
        let xj = parseInt(tr.cells[4].innerText);
        total += xj;
    }
    rows[rows.length - 1].cells[1].innerText = total;
};
function showHand() {
    let priceTD = event.srcElement;
    //cursor光标
    priceTD.style.cursor = "pointer";
}
function showBGColor() {
    //window.event表示当前发生的事件 ”window.“可以省略
    // console.log(window.event);
    // alert(window.event);
    let obj = window.event.srcElement;
    //alert(obj);
    //console.log(obj);   //发现obj是td,而不是tr。事件传递现象

    if (obj.tagName == "TD") {
        let td = obj;
        //parentElement:父元素   td的父元素是tr。tr有很多td子元素
        let tr = td.parentElement;
        tr.style.backgroundColor = "purple";

        //获取当前所有单元格,然后设置单元格中字体的颜色
        let tds = tr.cells;
        for (let i = 0; i < tds.length; i++) {
            tds[i].style.color = "white";
        }
    }

}
function clearBGColor() {
    let td = window.event.srcElement;
    if (td.tagName == "TD") {
        let tr = td.parentElement;
        tr.style.backgroundColor = "transparent";

        //获取当前行所有单元格,然后设置单元格中字体的颜色
        let tds = tr.cells;
        for (let i = 0; i < tds.length; i++) {
            tds[i].style.color = "#031f02";
        }
    }
}

2、fruit.html

<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>js-DOM/BOM实战</title>
    <link href="style/fruit.css" rel="stylesheet"></link>
    <script src="js/鼠标悬浮和离开事件.js"></script>
</head>
<body>
<div id="div0">
    <div id="div_title">欢迎使用水果库存系统</div>
    <div id="div2">
        <table id="fruit_tbl">
            <tr>
                <th class="w10"><input type="checkbox" id="ckAll"/></th>
                <th class="w20">名称</th>
                <th class="w20">单价</th>
                <th class="w20">数量</th>
                <th class="w20">小计</th>
                <th class="w10"><input type="button" value="批量删除" id="delsBtn"/></th>
            </tr>
            <!-- on:当...时候  mouse:鼠标  over:在...上-->
            <!--当鼠标悬浮在这个tr上时,调用showBGColor()这个方法-->
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>苹果</td>
                <td>5</td>
                <td>2</td>
                <td>10</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>菠萝</td>
                <td>3</td>
                <td>5</td>
                <td>15</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>哈密瓜</td>
                <td>4</td>
                <td>5</td>
                <td>20</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>葡萄</td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>青梅</td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>人参果</td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>菠萝蜜</td>
                </td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td><input type="checkbox" name="ck"/></td>
                <td>西红柿</td>
                <td>10</td>
                <td>5</td>
                <td>50</td>
                <td><img src='imgs/del.png' class="delBtn"/></td>
            </tr>
            <tr>
                <td colspan="2">总结:</td>
                <td colspan="4">0</td>
            </tr>
        </table>
    </div>
    <div id="div3">
        <p>编辑库存记录</p>
        <table id="fruit_add_tbl">
            <tr>
                <th class="w30">名称:</th>
                <td><input type="text" id="fname"/></td>
            </tr>
            <tr>
                <th>单价:</th>
                <td><input type="text" id="price"/></td>
            </tr>
            <tr>
                <th>数量:</th>
                <td><input type="text" id="fcount"/></td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="button" value="确定" id="addFruit"/>
                    <input type="reset" value="重填"/>
                </th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

3、fruit.css

*{
    color:rgb(3, 31, 2);
    font-weight: lighter;
}
body{
    padding:0;
    margin:0;
    background-color: rgb(3, 31, 2);
}
#div0{
    width:80%;
    border:0px solid red;
    background-color: rgb(209, 230, 235);
    margin-left:10%;
    padding-top:48px;
    padding-bottom:48px;
    margin-top:8px;
}
#div_title{
    width:80%;
    margin-left:10%;
    text-align: center;
    font-size:24px;
    letter-spacing: 4px;
    margin-bottom:16px;
}
#div2{
    margin-left:10%;
    border:0px solid red;
    width:80%;
}
.delBtn{
    width:16px;
    height:16px;
}
#fruit_tbl , #fruit_tbl td, #fruit_tbl th {
    border:1px solid lightgray;
    text-align: center;
}
#fruit_tbl{
    width:100%;
    line-height: 32px;
    border-collapse: collapse;
}
.w10{
    width:10%;
}
.w15{
    width:15%;
}
.w20{
    width:20%;
}
.w30 {
    width: 30%;
}
#div3{
    margin-left:20%;
    border:1px solid lightgray;
    width:60%;
    margin-top: 16px;
    padding-bottom: 16px;
}
#fruit_add_tbl {
    width: 40%;
    margin-left: 30%;
    border: 1px solid lightgray;
    border-collapse: collapse;
}
#fruit_add_tbl th,#fruit_add_tbl td {
    border: 1px solid lightgrey;
    padding: 4px;
}
#div3 p {
    text-align: center;
    letter-spacing: 4px;
}
#fruit_add_tbl input[type="button"],#fruit_add_tbl input[type="reset"] {
    width: 100px;
    height: 28px;
    border: 1px solid lightgray;
}
#fruit_add_tbl input[type="text"] {
    border: 1px solid lightgray;
    height: 22px;
}

在JS中往表格里插入数据,可以通过以下步骤实现:

  1. 获取对应的表格元素,可以使用document.getElementByIddocument.querySelector等方法获取。

  2. 创建需要插入的数据,可以使用数组、JSON对象等形式。

  3. 循环遍历数据,使用insertRowinsertCell等方法动态创建表格行和单元格。

  4. 在单元格中填充数据,可以使用innerHTML属性或者textContent属性。

以下是代码示例:

<!-- HTML代码 -->
<table id="myTable">
  <thead>
    <tr>
      <th>Name</th>
      <th>Age</th>
      <th>Gender</th>
    </tr>
  </thead>
  <tbody>
  </tbody>
</table>

// JavaScript代码
var data = [
  { name: 'Tom', age: 20, gender: 'Male' },
  { name: 'Mary', age: 25, gender: 'Female' },
  { name: 'John', age: 30, gender: 'Male' }
];

var table = document.getElementById('myTable');

for (var i = 0; i < data.length; i++) {
  var row = table.insertRow(i + 1);
  var cell1 = row.insertCell(0);
  cell1.innerHTML = data[i].name;
  var cell2 = row.insertCell(1);
  cell2.innerHTML = data[i].age;
  var cell3 = row.insertCell(2);
  cell3.innerHTML = data[i].gender;
}

该代码可以往表格中添加data数组中的数据。insertRow方法用于动态创建表格行,insertCell方法用于动态创建单元格。innerHTML属性被用来设置单元格内的文本内容。注意循环插入时需要使用i+1作为insertRowinsertCell的参数,因为第一行已经被表头占用。

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1216668.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

一言成文大模型:大模型实践落地之路

百度CEO&#xff0c;李彦宏指出、深度学习技术&#xff0c;大语言模型具备了理解、生成、逻辑、记忆等人工智能的核心基础能力&#xff0c;为通用人工智能带来曙光。 元宇宙_一言成文大模型 一言成文大模型&#xff1a;大模型实践落地之路

光伏含氟废水吸附处理

#光伏含氟废水吸附处理 氟的来源是冰晶石、萤石、氟磷灰等矿物&#xff0c;在钢铁、有色金属冶炼、铝、玻璃、化肥等工业领域得到广泛应用。 目前&#xff0c;在太阳能板生产中&#xff0c;一项关键工艺就是将氟化氢溶液浸泡在硅片上&#xff0c;以除去表面的磷硅玻璃&#xf…

小程序action-sheet结合自定义tabbar显示

要实现此效果&#xff0c;遇到的问题&#xff1a;背景在电脑端调试的情况正常的情况下&#xff0c;手机端点击事件工单&#xff0c;返回回来的时候action-sheet卡住在屏幕上&#xff0c;点击遮罩层都不消失。更奇怪的是 这种情况并不是每次发生&#xff0c;而是有时候发生&…

LeetCode34-34. 在排序数组中查找元素的第一个和最后一个位置

&#x1f517;:代码随想录:二分查找的算法讲解:有关left<right和left<right的区别 class Solution {public int[] searchRange(int[] nums, int target) {int nnums.length;int l0,hn-1;if(numsnull){return null; }if(n0){return new int[]{-1,-1}; }if(target&l…

ROS 学习应用篇(七)ROS中的坐标变换管理之tf初探

坐标变化是机器人中很重要的内容&#xff0c;但是要是概括下来无非就是旋转和平移矩阵。 小海龟跟随实验 做的是两个小海龟之间的跟随&#xff0c;其实就相当于视觉设备和本体设备见有一定的位置差在ros平台下tf坐标变化的实验 首先安装海龟tf变换包 新开终端输入 sudo apt…

杨辉三角00

题目链接 杨辉三角 题目描述 注意点 在「杨辉三角」中&#xff0c;每个数是它左上方和右上方的数的和 解答思路 从第一行开始&#xff0c;根据前一行计算该行的值 代码 class Solution {public List<List<Integer>> generate(int numRows) {List<List<…

Mybatis的Mapper接口传递多个参数的时候必须要加@Param注解吗?

答案是&#xff1a;不一定&#xff0c;取决于mybatis的版本、jdk的版本和javac的编译选项。 测试代码 Maven依赖&#xff1a; <dependency><groupId>org.mybatis.spring.boot</groupId><artifactId>mybatis-spring-boot-starter</artifactId>…

经典/启发式/改进启发式算法应用于机器人路径规划

路径规划是移动机器人导航规划中的一个十分重要且关键的研究课题。 移动的机器人总是在动态、复杂和不可控的环境中工作&#xff0c;比如对核电站的检查和变电站的检查。然而&#xff0c;复杂的动态工作环境要求移动的机器人能够调整其运动路线&#xff0c;以自主完成任务。使…

【AI视野·今日Sound 声学论文速览 第三十四期】Thu, 26 Oct 2023

AI视野今日CS.Sound 声学论文速览 Thu, 26 Oct 2023 Totally 9 papers &#x1f449;上期速览✈更多精彩请移步主页 Daily Sound Papers Dynamic Processing Neural Network Architecture For Hearing Loss Compensation Authors Szymon Drgas, Lars Bramsl w, Archontis Poli…

多标签页文件管理器 - Win系统

多标签页文件管理器 - Win系统 前言My Files-X Free360文件夹升级Win11 前言 Win10系统自带的文件管理器不支持多标签页功能&#xff0c;本文推荐几款多标签页文件管理器&#xff0c;可以在一个文件管理器窗口中打开多个标签页。 My Files-X Free 此文件管理器支持多标签页&…

Linux友人帐之网络编程基础邮件服务器与DHCP服务器

一、邮件服务器概述 1.1邮件服务基础 邮件服务器是一种计算机程序&#xff0c;它通过电子邮件协议接收、存储、处理和发送电子邮件。邮件服务器可以与电子邮件客户端程序&#xff08;如Outlook、Thunderbird等&#xff09;或Web邮件界面&#xff08;如Gmail、Outlook.com等&am…

非常经典的一道SQL报错注入题目[极客大挑战 2019]HardSQL 1(两种解法!)

题目环境&#xff1a; 没错&#xff0c;又是我&#xff0c;这群该死的黑客竟然如此厉害&#xff0c;所以我回去爆肝SQL注入&#xff0c;这次&#xff0c;再也没有人能拿到我的flag了 做了好多这个作者出的题了&#xff0c;看来又要上强度了 判断注入类型 username&#xff1a;a…

CSAPP第四章:Y86 SEQ(指令顺序执行)的硬件结构

SEQ硬件结构的抽象表示。 程序计数器放在寄存器中(左下角&#xff0c;起点)。先向上&#xff0c;再向右 取指&#xff1a;将程序计数器寄存器作为地址&#xff0c;指令存储器读取一个指令的字节&#xff0c;PC增加器计算valP(程序计数器增加后的值)。 解码&#xff1a;寄存器…

产品经理如何独立从0-1着手甲方项目,或者负责一个产品?

作为产品经理&#xff0c;独立从0到1着手甲方项目或负责一个产品是一项重要的任务。以下是一些步骤和建议&#xff0c;可以帮助产品经理成功地完成这个任务。 1. 研究市场和竞争对手&#xff1a;在开始任何项目之前&#xff0c;产品经理应该对市场进行深入研究&#xff0c;并了…

PyTorch:GPU的使用

在深度学习领域&#xff0c;神经网络模型训练所需的计算量巨大&#xff0c;这就对计算资源提出了高要求。为了处理这一问题&#xff0c;图形处理器&#xff08;GPU&#xff09;被引入到深度学习中&#xff0c;其并行计算能力可以极大加速神经网络的训练过程。PyTorch作为一款出…

【数据分享】1961—2022年全国范围的逐日降水栅格数据

降水数据是我们在各项研究中最常用的气象指标之一&#xff01;之前我们给大家分享过来源于国家青藏高原科学数据中心发布的1901-2022年1km分辨率逐月降水栅格数据以及1901-2022年1km分辨率逐年降水栅格数据&#xff08;均可戳我跳转&#xff09;&#xff01;很多小伙伴拿到数据…

【Qt之QWizard问题】setPixmap()设置logo、background、watermark无效不显示解决方案

问题原因&#xff1a; 使用QWizard或者QWizardPage设置像素图&#xff0c;结果设置完不显示效果。 设置示例&#xff1a; setPixmap(QWizard::WatermarkPixmap, QPixmap("xxx/xxx/xxx.png"));setPixmap(QWizard::BackgroundPixmap, QPixmap("xxx/xxx/xxx.png&…

【星海出品】云存储 ceph

https://ceph.com/en/ 建议运行带有两个网络的Ceph存储集群&#xff1a;公共&#xff08;前端&#xff09;网络和集群&#xff08;后端&#xff09;网络。为了支持两个网络&#xff0c;每个Ceph节点都需要有多个NIC。 Monitor 一个Ceph集群需要多个Monitor组成的小集群&#x…

【C++】【Opencv】cv::GaussianBlur、cv::filter2D()函数详解和示例

本文通过函数详解和运行示例对cv::GaussianBlur和cv::filter2D()两个函数进行解读&#xff0c;最后综合了两个函数的关系和区别&#xff0c;以帮助大家理解和使用。 目录 cv::GaussianBlur&#xff08;&#xff09;函数详解运行示例 filter2D()函数详解运行示例 总结两个函数联…

关于 Git 你了解多少?

1. 什么是Git? Git 是一个版本控制系统&#xff0c;由林纳斯托瓦兹创建。它旨在管理项目代码的更改&#xff0c;以便团队成员可以协作开发和维护代码库。Git 可以让用户跟踪代码的更改、回滚错误的更改、合并代码等。Git 还具有分支和标签的功能&#xff0c;使得团队成员可以在…