创建10个<a>标签，点击时弹出对应的序号_创建 10 个a 标签,点击弹出对应序号-优快云博客

01-04

12-23

779

利用闭包的方式 for (var i = 0; i < 10; i++) { var aObj = document.createElement('a') aObj.innerText = 'a标签' + i aObj.onclick = (function (i) { return function () { alert(i) } })(i) document.body.appendChild(aObj) } 利用块级作用域的方式 for (

JS中创建10个a标签，点击弹出对应的序号

不想起床

02-02

1329

for (let i = 1; i <= 10; i++) { let a = document.createElement('a') a.innerHTML = i + '<br>' document.body.appendChild(a) a.addEventListener('click', functio...

创建 10 个<a>标签，点击的时候弹出来对应的序号

weixin_33709590的博客

04-04

306

错误的写法 var i, a for (i = 0; i < 10; i++) { a = document.createElement('a') a.innerHTML = i + '<br>' a.addEventListener('click', function (e) { e.preventDefault() al...

@{ Layout = null; } <!DOCTYPE html> <html> <head> <link href="~/Scripts/layui/css/layui.css" rel="stylesheet" /> <script src="~/Scripts/layui/layui.js"></script> <script src="~/Scripts/jquery-3.4.1.js"></script> <style> body { padding: 10px 20px 20px 20px; width: 90% } .but { margin-top: -5px } </style> </head> <body> <fieldset class="layui-elem-field"> <legend> <span class="layui-breadcrumb"> <a href="">首页</a> <a href="">职位管理</a> </span> </legend> <div class="layui-field-box"> <div class="layui-form-item"> <div class="layui-inline"> <label class="layui-form-label">职位名称</label> <div class="layui-input-block"> <input type="text" name="name" id="name" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-inline"> <label class="layui-form-label">职位代码</label> <div class="layui-input-inline"> <input type="text" name="code" id="code" autocomplete="off" class="layui-input"> </div> </div> <button type="button" class="layui-btn layui-btn-radius but" id="searchButton" onclick="Search()"><i class="layui-icon layui-icon-search"></i>查询</button> <button type="button" class="layui-btn layui-bg-blue but"><i class="layui-icon layui-icon-addition"></i>添加</button> </div> </div> </fieldset> <fieldset class="layui-elem-field"> <table class="layui-hide" id="test" lay-filter="test"></table> <script type="text/html" id="toolDemo"> <div class="layui-clear-space"> <a class="layui-btn layui-btn-xs" lay-event="edit" id="Edit"><i class="layui-icon layui-icon-edit"></i>编辑</a> <a class="layui-btn layui-btn-xs layui-bg-orange" lay-event="edit" id="del"><i class="layui-icon layui-icon-clear"></i>删除</a> </div> </script> </fieldset> <script> var tableIns; layui.use(['table', 'util'], function () { var table = layui.table; // 创建渲染实例 tableIns = table.render({ elem: '#test', url: '/JobManagem/GetList', // 此处为静态模拟数据，实际使用时需换成真实接口 page: true, cols: [[ { type: 'numbers', width: '15%', title: '序列号' }, { field: 'JobName', width: '20%', title: '职位名称' }, { field: 'JobCode', width: '20%', title: '职位代码' }, { field: 'ModifyDate', width: '20%', title: '修改时间', templet: function (d) { console.log(d); // 得到当前行数据 console.log(this); // 得到表头当前列配置项 console.log(d.LAY_NUM); // 得到序号。或其他特定字段 // 返回模板内容 return '<a href=" ' + d.id + '" class="layui-table-link">' + d.title + '</a >' } }, { title: '操作', width: '25%', templet: '#toolDemo' } ]], }); //编辑，删除 table.on('tool(test)', function (obj) { // 双击 toolDouble var data = obj.data; // 获得当前行数据 // console.log(obj) if (obj.event === 'edit') { //编辑 } else { layer.confirm('真的删除行 [' + data.JobName + '] 么', function (index) { obj.del(); // 删除对应行（tr）的DOM结构 layer.close(index); // 向服务端发送删除指令 }); } }); }); //重载，模糊查询 function Search() { var nameVal = $('input[name="name"]').val().trim(); var codeVal = $('input[name="code"]').val().trim(); // 完整重载 - 所有属性属性(options)均可参与到重载中 tableIns.reload({ where: { // 传递数据异步请求时携带的字段 name: nameVal, code: codeVal }, height: 500 // 重设高度 }); } // 处理日期格式函数 function formatDate(dateStr) { // 提取时间戳 var timestamp = parseInt(dateStr.replace(/\/Date$(\d+)$\//, '$1')); // 创建 Date 对象 var date = new Date(timestamp); // 获取年、月、日 var year = date.getFullYear(); var month = String(date.getMonth() + 1).padStart(2, '0'); var day = String(date.getDate()).padStart(2, '0'); // 返回格式化后的日期 return year + '-' + month + '-' + day; } </script> </body> </html>实现增删改查功能请你优化但是最小改动实现功能就行以及下面是控制器using System; using System.Collections.Generic; using System.IO; using System.Linq; using System.Threading.Tasks; using System.Web; using System.Web.Mvc; using WebApplication1.Models; using WebApplication1.Scripts; using Newtonsoft.Json; namespace WebApplication1.Controllers { public class JobManagemController : Controller { AoutEntities db = new AoutEntities(); ReturnListJsonData jsonData = new ReturnListJsonData(); // GET: JobManagem public ActionResult Index() { return View(); } #region 模糊查询 /// <summary> /// 模糊查询 /// </summary> /// <param name="page"></param> /// <param name="limit"></param> /// <param name="name"></param> /// <param name="code"></param> /// <returns></returns> public ActionResult GetList(int page, int limit, string name, string code) { var list = db.Job.Where(a => a.IsDel == false).ToList(); // if (!string.IsNullOrEmpty(name)) { list = list.Where(a => a.JobName.Contains(name)).ToList(); } if (!string.IsNullOrEmpty(code)) { list = list.Where(a => a.JobCode.Contains(code)).ToList(); } var offset = (page - 1) * limit; var data = list.OrderByDescending(a => a.ModifyDate).Skip(offset).Take(limit); jsonData.code = 0; jsonData.count = list.Count; jsonData.data = data; return Json(jsonData, JsonRequestBehavior.AllowGet); } #endregion } }

07-11

同样，编辑功能在表格的操作按钮里，点击编辑时应该获取当前行的数据，填充到表单中，然后弹出编辑窗口。接下来是添加和编辑的弹窗部分。用户当前的代码里没有这部分，所以需要补充。可以使用Layui的layer弹窗组件...