目录
前言ftl文件js文件前言
任务描述：动态添加按钮，并对每个按钮绑定一个点击事件。
ftl文件
<!DOCTYPE html><html><head><#include "/head.ftl"><script type="text/javascript" src="/lib/template-web.js"></script><script type="text/html" id="paperTemplate"><form class="layui-form">{{each data piao index}}<div class="layui-btn-group"><button type="button" class="layui-btn"> 票{{piao.order}}预览 </button></div>{{/each}}</form></script></head><body><script>var autoId=${autoId};</script><div class="layui-fluid"><div class="layui-row"><fieldset class="layui-elem-field"><legend><b>${ theObj.name!}(ID:${theObj.autoId!})</b></legend><div class="layui-field-box" style="text-align: center">满分：${ theObj.fullScore!} 及格分：${ theObj.passScore!}</div><div class="layui-field-box" style="text-align: center"> 出卷人：${ theObj.createUserName!} 出卷时间： ${ theObj.createDate?datetime}</div><div class="layui-card-body" id="setTab"></div></fieldset></div><iframe onload="setHeight()" width=100% id="my-iframe" frameborder="no" height="1" src=" " scrolling="no"></iframe></iframe></div><script type="text/javascript" src="/js/business/paper/tpiao_review.js"></script></body></html>
js文件
在js中写入
var prefix = "/business/paper";var tags=[];var step = 111;var table;var dataPiao = [];var order= [];var piaoId= [];$.ajax({id: 'autoId',url: '/business/paper/listById/'+autoId //数据接口,success: function (result) {if(result.code==0){console.log(result);var counts = result.data.length;for(var i=0;i<counts;i++){dataPiao[i] = {autoIds:result.data[i].autoId, order:i+1};piaoId[i]=dataPiao[i].autoIds;console.log(dataPiao[i].autoIds);}var htmldata = template("paperTemplate",{data:dataPiao});var container = document.querySelector("#setTab");container.innerHTML=htmldata;let btns=document.querySelectorAll("button");for (let j= 0; j <btns.length; j++) {//为每个按钮都要注册点击事件btns[j].onclick = function () {document.getElementById('my-iframe').setAttribute('src','/business/tpiao/p_review?autoId=' + dataPiao[j].autoIds + '&flag=' + 'preview');};}}}});function getIframeWindow(obj) {return obj.contentWindow || obj.contentDocument.parentWindow;}function getIframeHeight(obj){var idoc = getIframeWindow(obj).document;if(idoc.body){return Math.max(idoc.body.scrollHeight,idoc.body.offsetHeight);}else if(idoc.documentElement){return Math.max(idoc.documentElement.scrollHeight,idoc.documentElement.offsetHeight);}}function setHeight(){var myiframe = document.getElementById("my-iframe");myiframe.height = getIframeHeight(myiframe);}}
如果觉得《js动态添加按钮 并绑定点击事件》对你有帮助，请点赞、收藏，并留下你的观点哦！
