jquery怎么实现修改并保存学生信息功能

jquery怎么实现修改并保存学生信息功能,第1张

使稿弯用jQuery。

1、给修改按钮添加点击事件监听器,当点击按钮时,获取到要修改的学生信息的id。

2、将学生信息填充嫌枯到表单中,可以使用jQuery的val()方法或者attr()方法来设置表单元素的value或者属键者闷性值。

3、给保存按钮添加点击事件监听器,当点击按钮时,获取到表单中的学生信息,然后发送Ajax请求来更新数据。

4、在服务器端编写更新学生信息的API接口,并在接口中实现更新学生信息的功能。

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<script type="text/javascript" src="xlsx.core.min.js"扒稿></script>

<script>

window.onload=function(){

$('#excel-file').change(function(e) {

var files = e.target.files

var fileReader = new FileReader()

fileReader.onload = function(ev) {

try {

var data = ev.target.result,

workbook = XLSX.read(data, {

type: 'binary'

}), // 以二进制流方式读取得到整份excel表格对象

persons = [] // 存储获取到的数据

} catch (e) {

console.log('文件类型不正确')

return

}

// 表格的表格范围,可用于判断表头是否数量是否春搜孝正确

var fromTo = ''

// 遍历每张表读取

for (var sheet in workbook.Sheets) {

if (workbook.Sheets.hasOwnProperty(sheet)) {

fromTo = workbook.Sheets[sheet]['!ref']

console.log(fromTo)

persons = persons.concat(XLSX.utils.sheet_to_json(workbook.Sheets[sheet]))

// break // 如果只取第一张表,就取消注释这行

}

}

console.log(persons)

//将persons赋值给要展示的表格数组里即可展示在界面

}

// 以二进制方式打开文件

fileReader.readAsBinaryString(files[0])

})

}

</script>

</head>

<body>

<input type="file" id="excel-file">

</body>

</html>

还漏世有就是存在数据库里再拿出来显示。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11987266.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-20
下一篇 2023-05-20

发表评论

登录后才能评论

评论列表(0条)

保存