一、HTML中的data属性 使用data属性来嵌入自定义的数据 data-*=" "
在项目中有一个问题,经常需要获得当前行或者一个位置的值,比如我项目中需要在后台php文件中foreach循环输出一行<tr>,然后将这个<tr>传到前台页面中,
foreach ($res as $k => $v) { $str .= "<tr> <td>{$v[‘0‘]}</td> <td><input value=‘{$v[‘1‘]}‘></td> <td><input value=‘{$v[‘2‘]}‘></td> <td><input value=‘{$v[‘3‘]}‘></td> <td><input value=‘{$v[‘4‘]}‘></td> <td> <button id=\"btn\" data-bumen=\"{$v[‘2‘]}\" onclick=‘dele(this)‘ value=\"{$v[‘0‘]}\" >立即删除</button> <button onclick=‘sub(this)‘ value=\"{$v[‘0‘]}\" >立即修改</button> </td> </tr>"; }
此时$v是我数据库中的单行数据,通过$v[‘ ‘] ,来获取当前字段的值, 将第一个button按钮设置一个data属性,它里面保存的是每循环一行时的$v[‘ 2 ‘]的值,
这个值每次都是不一样的,在js中进行接收并判断
function dele(parm) { var id = parm.value; var type = ‘del‘; var btn = document.getElementById("btn"); var btn_vue = btn.dataset.bumen; // console.log(btn_vue); var xml = new XMLHttpRequest; xml.onreadystatechange = function() { if (xml.readyState == 4 && xml.status == 200) { alert(xml.responseText); if (btn_vue == "财务部") { document.getElementById(‘bma‘).click(); } if (btn_vue == "生产部") { document.getElementById(‘bmb‘).click(); } if (btn_vue == "招商部") { document.getElementById(‘bmc‘).click(); } } } xml.open("POST", "/select.php"); xml.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); xml.send(‘id=‘ + id + ‘&type=‘ + type); }
var btn来获得这个按钮,声明变量 btn_vue 来获得自定义属性的值(也就是获得data属性中的$[ ‘2 ‘ ])
var btn = document.getElementById("btn");
var btn_vue = btn.dataset.bumen;
<button data-bumen=\"{$v[‘2‘]}\"> 立即删除 </button>;
此时我们已经获得这个值,但是有一点之前已经说过,$v[‘ 2 ‘] 这个值不是固定的,所以我们在ajax接收的时候要进行判断
if (btn_vue == "财务部") { document.getElementById(‘bma‘).click(); } if (btn_vue == "生产部") { document.getElementById(‘bmb‘).click(); } if (btn_vue == "招商部") { document.getElementById(‘bmc‘).click(); }
通过判断不同的值,来创建一个虚拟点击操作,实现自动刷新的一个功能
原文地址:https://www.cnblogs.com/dumenglong/p/11294386.html
时间: 2024-10-08 13:05:16