jquery - 如何将WEBSQL导出到excel？
问题描述
我这里有一个代码。即使关闭浏览器，我如何将数据从 websql 导出到 excel？请帮助我处理模态。它不工作。
谢谢谁来回答。
我这里有一个代码。即使关闭浏览器，我如何将数据从 websql 导出到 excel？请帮助我处理模态。它不工作。
谢谢谁来回答。
<!DOCTYPE HTML>
<html>
<head>
<title>SuperNotes v.2</title>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/fontawesome.min.css"/>
<script type = "text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS NAME (id INTEGER PRIMARY KEY, usdomain,agent)');
})
function load() {
db.transaction(function (tx) {
loadagain();
});
}
function insert() {
var i;
var usdomain = $('#usdomaintxt').val();
var agent = $('#agenttxt').val();
db.transaction(function (tx) {
tx.executeSql('insert into NAME(usdomain, agent) values("' + usdomain + '", "' + agent + '")');
loadagain();
})
}
function showupdatediv(id) {
$('#insertdiv').css('display', 'none');
$('#updatediv').css('display', 'block');
$('#idupdate').val(id);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NAME WHERE id=?',[id], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
$('#usdomainupdate').val(results.rows.item(i).usdomain);
$('#agentupdate').val(results.rows.item(i).agent);
}
}, null);
})
}
function update() {
var id = $('#idupdate').val();
var usdomain = $('#usdomainupdate').val();
var agent = $('#agentupdate').val();
db.transaction(function (tx) {
tx.executeSql('UPDATE NAME SET usdomain=?, agent=? WHERE id=?', [usdomain, agent, id]);
$('#insertdiv').css('display', 'block');
$('#updatediv').css('display', 'none');
loadagain();
})
}
function loadagain() {
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NAME', [], function (tx, results) {
var len = results.rows.length, i;
document.querySelector('#status').innerHTML = "";
for (i = 0; i < len; i++) {
msg = "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).usdomain + "</td><td>"+ results.rows.item(i).agent +"</td><td><button class='btn btn-danger mr-1' id='"+ results.rows.item(i).id +"' onclick='deleteNote(db, this.id)'><i class='fa fa-trash-alt'></i></button><button class='btn btn-warning' id='"+ results.rows.item(i).id +"' onclick='showupdatediv(this.id);'>Edit <i class='fa fa-edit'></i></button></td></tr>";
document.querySelector('#status').innerHTML += msg;
}
msg1 = "<BR><p>Found rows: " + len + "</p>";
document.querySelector('#rows').innerHTML = msg1;
}, null);
})
}
function deleteNote(db, id) {
db.transaction(function(tx) {
tx.executeSql('delete from NAME where id=?', [id]);
loadagain();
});
}
</script>
</head>
<body onload="load();">
<div class="container">
<div id="insertdiv" class="row m-2">
<label for="usdomaintext">US Domain: </label>
<input class="m-1" type="text" id="usdomaintxt">
<label for="agenttext">Name: </label>
<input class="m-1" type="text" id="agenttxt">
<button class="btn btn-success" onclick="insert();">INSERT<i class="fa fa-hand-middle-finger"></i></button>
</div>
<p id="rows">Found rows:</p>
<div class=" table" style="overflow: auto; height: 600px; width: 500px">
<center>
<table id="nametbl" class="table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>USDOMAIN</th>
<th>NAME</th>
<th>Action</th>
</tr>
</thead>
<tbody id = "status" name = "status"></tbody>
</table>
</center>
</div>
<div id="updatediv" style="display: none;">
<input type="hidden" id="idupdate" value="">
<label for="usdomainupdate">US Domain: </label>
<input class="m-1" type="text" id="usdomainupdate" value="">
<label for="agentupdate">Name: </label>
<input class="m-1" type="text" id="agentupdate" value="">
<button class="btn btn-success" onclick="update();">Update</button>
</div>
</div>
<!--Open Modal -->
<!-- Modal -->
<div id="agentmodal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
</body>
</html>
解决方案
这是我认为的答案。
<!DOCTYPE HTML>
<html>
<head>
<title>SuperNotes v.2</title>
<style type="text/css">
.modal, .modal-lg {
height: 400px;
width: 700px;
}
</style>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script type = "text/javascript">
var db = openDatabase('mydb', '1.0', 'Test DB', 2 * 1024 * 1024);
var msg;
db.transaction(function (tx) {
tx.executeSql('CREATE TABLE IF NOT EXISTS NAME (id INTEGER PRIMARY KEY, usdomain,agent)');
})
function load() {
db.transaction(function (tx) {
loadagain();
});
}
function insert() {
var i;
var usdomain = $('#usdomaintxt').val();
var agent = $('#agenttxt').val();
db.transaction(function (tx) {
tx.executeSql('insert into NAME(usdomain, agent) values("' + usdomain + '", "' + agent + '")');
loadagain();
})
}
function showupdatediv(id) {
$(document).ready(function(){
$("#updatemodal").modal();
$("#agentmodal").modal('hide');
});
$('#idupdate').val(id);
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NAME WHERE id=?',[id], function (tx, results) {
var len = results.rows.length, i;
for (i = 0; i < len; i++) {
$('#usdomainupdate').val(results.rows.item(i).usdomain);
$('#agentupdate').val(results.rows.item(i).agent);
}
}, null);
})
}
function update() {
var id = $('#idupdate').val();
var usdomain = $('#usdomainupdate').val();
var agent = $('#agentupdate').val();
db.transaction(function (tx) {
tx.executeSql('UPDATE NAME SET usdomain=?, agent=? WHERE id=?', [usdomain, agent, id]);
$(document).ready(function(){
$("#updatemodal").modal('hide');
$("#agentmodal").modal();
});
loadagain();
})
}
function loadagain() {
db.transaction(function (tx) {
tx.executeSql('SELECT * FROM NAME', [], function (tx, results) {
var len = results.rows.length, i;
document.querySelector('#status').innerHTML = "";
for (i = 0; i < len; i++) {
msg = "<tr><td>" + results.rows.item(i).id + "</td><td>" + results.rows.item(i).usdomain + "</td><td>"+ results.rows.item(i).agent +"</td><td><button class='btn btn-danger mr-1' id='"+ results.rows.item(i).id +"' onclick='deleteNote(db, this.id)'><i class='fa fa-trash-alt'></i></button><button class='btn btn-warning' id='"+ results.rows.item(i).id +"' onclick='showupdatediv(this.id);'>Edit <i class='fa fa-edit'></i></button></td></tr>";
document.querySelector('#status').innerHTML += msg;
}
msg1 = "<BR><p>Found rows: " + len + "</p>";
document.querySelector('#rows').innerHTML = msg1;
}, null);
})
}
function deleteNote(db, id) {
db.transaction(function(tx) {
tx.executeSql('delete from NAME where id=?', [id]);
loadagain();
});
}
load();
</script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#agentmodal">
Agent Management
</button>
<!-- Agent Modal -->
<div class="modal fade right" id="agentmodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<center>
<h5 class="modal-title" id="exampleModalPreviewLabel">Agent User Management</h5>
</center>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<!-- Content Here -->
<div class="card card-primary">
<div class="card-block">
<div class="container">
<div id="insertdiv" class="row m-2">
<label for="usdomaintext">US Domain: </label>
<input class="m-1" type="text" id="usdomaintxt">
<label for="agenttext">Name: </label>
<input class="m-1" type="text" id="agenttxt">
<button class="btn btn-success" onclick="insert();">INSERT<i class="fa fa-hand-middle-finger"></i></button>
</div>
<p id="rows">Found rows:</p>
<div class=" table" style="overflow: auto; height: 400px;">
<center>
<table id="nametbl" class="table-bordered table-hover table-striped">
<thead>
<tr>
<th>ID</th>
<th>USDOMAIN</th>
<th>NAME</th>
<th>Action</th>
</tr>
</thead>
<tbody id = "status" name = "status"></tbody>
</table>
</center>
</div>
</div>
</div>
</div>
<!-- Content End -->
</div>
</div>
</div>
</div>
</div>
<!-- Update Modal -->
<div class="modal fade right" id="updatemodal" tabindex="-1" role="dialog" aria-labelledby="exampleModalPreviewLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalPreviewLabel">Update</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div id="updatediv">
<input type="hidden" id="idupdate" value="">
<div class="form-group">
<label for="usdomainupdate">US Domain: </label>
<input class="m-1" type="text" id="usdomainupdate" value="">
</div>
<div class="form-group">
<label for="agentupdate">Name: </label>
<input class="ml-4" type="text" id="agentupdate" value="">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button class="btn btn-success" onclick="update();">Update</button>
</div>
</div>
</div>
</div>
<!-- Modal -->
</body>
</html>
推荐阅读
- python - kivy 的 Window.softinput_mode 是否适用于树莓派？
- java - 如何在java swing中显示数据库中的所有数据
- css - 字体不会加载所有字体
- kendo-grid - 如何使用 Kendo UI 在网格顶部创建一行？
- php - 从 http 重定向到 https 时出现 MVC 路由错误
- json - 如何将 JSON 上传到服务器？
- ios - 在 Swift 中以编程方式创建的 UIActivityIndicatorView 不显示
- search - 在域驱动设计中查询聚合子集中的不同值？
- corda - 在 Corda 中，知名、服务和机密身份有什么区别？
- java - Gson如何解析嵌套数组