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

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=>{debuggerlet fruitList = response.data.data// 此处使用的是axios，那么响应回来的数据自动就是json，// 不需要再进行parse(如果是原始的ajax操作，那么一定需要parse)// let fruitArr = JSON.parse(fruitList)let fruitArr = fruitListfor(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.fnamefnameTD.innerHTML = '<a href="edit.html?fid='+fruit.fid+'">'+fruit.fname+'</a>';priceTD.innerText = fruit.pricefcountTD.innerText = fruit.fcountoperTD.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.mzph.cn/news/128307.shtml

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

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

1、提取公共方法common.js

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

2.1、index.html

2.2、index.js

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

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

相关文章

力扣刷题 day63：11-02

数据库 | 看这一篇就够了！最全MySQL数据库知识框架！

Linux Makefile变量详解

【Proteus仿真】【51单片机】贪吃蛇游戏

Keil uv5 MDK使用教程

pytest 使用(二）：前后置（固件，夹具）

JavaScript

详解API接口如何安全的传输数据(内附商品详情API接口接入方式）

【计算机网络】运输层

利用wasm实现读写本地项目的在线编辑器

python爬虫利用代理IP分析大数据

Java文件操作详解

UTF-8-SIG 和 UTF-8 with BOM 有什么区别，该怎么选

前端基础之CSS

常见接口测试面试题

物联网整体框架有哪些层面？

HTML标题、段落、文本格式化

【Linux】Nginx安装使用负载均衡及动静分离（前后端项目部署），前端项目打包

CN考研真题知识点二轮归纳（4）

小程序如何设置自动使用物流账号发货

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

1、提取公共方法common.js

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

2.1、index.html

2.2、index.js

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

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

相关文章

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