项目中实现虚拟点击操作

发布时间：2020-12-13 22:16:55 所属栏目：PHP教程来源：网络整理

导读：一、HTML中的data属性??? 使用data属性来嵌入自定义的数据? ? data-*="? " 在项目中有一个问题，经常需要获得当前行或者一个位置的值，比如我项目中需要在后台php文件中foreach循环输出一行tr，然后将这个tr传到前台页面中， foreach ($res as $k = $v) { $s

一、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(); }

通过判断不同的值，来创建一个虚拟点击操作，实现自动刷新的一个功能

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!