javascript - 保存按钮以从 JavaScript 上传到“MySQL”
问题描述
<table>
<tr>
<th>20.00 - 21.00</th>
<?php if ($senin20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
echo "<td class='$kelas'><span>"; echo $senin20; "</span></td>"; ?>
<?php if ($selasa20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
echo "<td class='$kelas'><span>"; echo $selasa20; "</span></td>"; ?>
<?php if ($rabu20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
echo "<td class='$kelas'><span>"; echo $rabu20; "</span></td>"; ?>
<?php if ($kamis20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
echo "<td class='$kelas'><span>"; echo $kamis20; "</span></td>"; ?>
<?php if ($jumat20 == "-") {$kelas = "kosong";} else {$kelas = "biasa";}
echo "<td class='$kelas'><span>"; echo $jumat20; "</span></td>"; ?>
</tr>
</table>
<script>
// insert hidden input to each td element.
document.querySelectorAll("table#timetable td").forEach(function(each) {
let value = each.querySelector("span").innerText;
each.innerHTML += `<input type="text" value="${value}" style="display: none;">`;
// when user double click, hidden span and display input.
each.addEventListener("dblclick", function(event) {
each.querySelector("span").style.display = "none";
each.querySelector("input").style.display = "initial";
each.querySelector("input").focus();
});
// when user leave input (blur), hidden input and display span, and change span's innerText.
each.querySelector("input").addEventListener("blur", function(event){
each.querySelector("input").style.display = "none";
each.querySelector("span").style.display = "initial";
let value = each.querySelector("input").value;
each.querySelector("span").innerText = value;
});
});
</script>
<br>
<button id="save">Save</button>
<br>
我想制作一个保存按钮,将value
JavaScript 中变量的输入保存到我的数据库中。
如何将value
JS 中的变量保存到 PHP 变量($senin20
, $selasa20
, $rabu20
, $kamis20
, $jumat20
)并保存到数据库中?
解决方案
youb 可以获取 HTML DOM 并使用 Ajax 将其发送到 db
var objdta={
senin: document.getElementsByClassName("senin").value
}
$.ajax({
url:"save.php",
method:"POST",
data:objdta,
dataType:"json"});
推荐阅读
- xamarin.forms - How to display an Admob interstitial, after a page has loaded in Xamarin Forms?
- hive - 蜂巢中日期提取的正则表达式
- r - raster::plotRGB() 有效,但 tm_rgb() 给出“ind[!isna] <- m2 NAs are not allowed in subscripted assignments 中的错误”
- python - 朴素贝叶斯分类器不起作用,更喜欢垃圾邮件
- c# - C#/CLI 包装器“无法加载文件或程序集”
- python - 用 Beautiful Soup 和 Selenium 一起刮时出错
- node.js - 正则表达式替换文本数组中的主题标签
- angularjs - 在主干和 Angularjs 的情况下,Highcharts 默认比例间隔不同
- javascript - flexbox list column-reverse 并从顶部开始
- nginx - 使用 nginx 入口控制器为金丝雀版本启用会话亲和性