项目实战：给首页上库存名称添加超链接然后带fid跳转到edit页面

news2024/11/15 17:28:34

1、提取公共方法common.js

function $(key){
    if(key){
        if(key.startsWith("#")){
            key = key.substring(1)
            return document.getElementById(key)
        }else{
            let nodeList = document.getElementsByName(key)
            return Array.from(nodeList)
        }
    }
}

2、给库存名称添加超链接

2.1、index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/index.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
  <div id="div0">
    <div id="div_title">
      <p>欢迎使用水果库存系统</p>
    </div>
    <div id="div_fruit_table">
      <table id="fruit_tbl">
        <tr>
          <th class="w25">名称</th>
          <th class="w25">单价</th>
          <th class="w25">库存</th>
          <th>操作</th>
        </tr>
        <!--
        <tr>
          <td><a href='edit.html?fid=1'>苹果</a></td>
          <td>5</td>
          <td>100</td>
          <td><img class="delImg" src="imgs/del.png" onclick='delFruit(1)'/></td>
        </tr>
        -->
      </table>
    </div>
  </div>
</body>
</html>

2.2、index.js

window.onload=function(){
    loadData();
}
loadData=function(){
    axios({
        method:'get',
        url:'/index'
    }).then(response=>{
        debugger
        let fruitList = response.data.data
        // 此处使用的是axios，那么响应回来的数据自动就是json，
        // 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)
        // let fruitArr = JSON.parse(fruitList)
        let fruitArr = fruitList
        for(let i = 0 ; i<fruitArr.length; i++){
            let fruitTbl = $("#fruit_tbl")
            let tr = fruitTbl.insertRow()
            let fnameTD = tr.insertCell()
            let priceTD = tr.insertCell()
            let fcountTD = tr.insertCell()
            let operTD = tr.insertCell()

            let fruit = fruitArr[i]
            //fnameTD.innerText = fruit.fname
            fnameTD.innerHTML = '<a href="edit.html?fid='+fruit.fid+'">'+fruit.fname+'</a>';
            priceTD.innerText = fruit.price
            fcountTD.innerText = fruit.fcount
            operTD.innerHTML="<img class=\"delImg\" src=\"imgs/del.png\"/>"
        }
    })
}

3、创建编辑水果库存页面edit.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="style/index.css">
    <script src="script/axios.min.js"></script>
    <script src="script/edit.js"></script>
    <script src="script/common.js"></script>
</head>
<body>
<div id="div0">
    <div id="div_title">
        <p>编辑水果库存信息</p>
    </div>
    <div id="div_fruit_table">
        <input type="hidden" id="fid" value="0"/>
        <table id="fruit_tbl">
            <tr>
                <th class="w25">名称:</th>
                <td><input type="text" id="fname"/></td>
            </tr>
            <tr>
                <th class="w25">单价:</th>
                <td><input type="text" name="price" id="price"/> </td>
            </tr>
            <tr>
                <th class="w25">库存:</th>
                <td><input type="text" name="fcount" id="fcount"/> </td>
            </tr>
            <tr>
                <th class="w25">备注:</th>
                <td><input type="text" name="remark" id="remark"/> </td>
            </tr>
            <tr>
                <th colspan="2">
                    <input type="button" value="修改" onclick="update()"/>
                    <input type="button" value="取消"/>
                </th>
            </tr>
        </table>
    </div>
</div>
</body>
</html>

4、获取URL参数中的queryString查询字符串edit.js

let queryString = window.location.search.substring(1)

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

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

项目实战：给首页上库存名称添加超链接然后带fid跳转到edit页面

1、提取公共方法common.js

2、给库存名称添加超链接

2.1、index.html

2.2、index.js

3、创建编辑水果库存页面edit.html

4、获取URL参数中的queryString查询字符串edit.js

相关文章

Qt Creator创建新项目警告问题

【Java初阶练习题】-- 循环+递归练习题

Redis的安装及基本使用

如何从嘉立创下单一个PCB打板（免费）

jeecg-uniapp 转成小程序的过程以及报错 uniapp点击事件

程序员有哪些规避风险的合法兼职渠道？

【自动控制原理】数学模型：系统框图及其化简、控制系统传递函数

ONNX的结构与转换

zabbix6.4监控centos

nodejs express vue 点餐外卖系统源码

DNS 域名解析协议

MATLAB和S7-1200PLC OPC通信(激活S7-1200PLC OPC UA服务器)

【算法挨揍日记】day18——746. 使用最小花费爬楼梯、91. 解码方法

进程优先级(nice值,top指令),独立性,竞争性,进程切换(时间片),抢占与出让,并发并行概念

有谁知道怎么下载微信视频号视频吗？

Redis安装-常用命令及操作

LLMs之RAG之IncarnaMind：IncarnaMind的简介(提高RAG召回率的两个优化技巧=滑块遍历反向查找+独立查询)、安装、使用方法之详细攻略

分享66个工作总结PPT，总有一款适合您

金麟国际用工-全新蓝领跨境就业服务平台

c++-AVL树

项目实战：给首页上库存名称添加超链接然后带fid跳转到edit页面

1、提取公共方法common.js

2、 给库存名称添加超链接

2.1、index.html

2.2、index.js

3、创建编辑水果库存页面edit.html

4、获取URL参数中的queryString查询字符串edit.js

相关文章

2、给库存名称添加超链接