我试图为数据库中的每一行创建一个编辑模式。我的页面看起来像这样
当我点击编辑图标时,我打开了一个模式,可以在其中编辑用户的详细信息。模态是这样的
我想展示的模态是这样的
Myview.php
<;div class=“箱体”>;
<;table id=“example2”class=“表格边框表格悬停”>;
<;thead>;
<;tr>;
<;!--&书信电报;th></th>--&燃气轮机;
<;th>;用户名</th>;
<;th>;联系</th>;
<;th>;电子邮件</th>;
<;th>;角色类型</th>;
<;th>;行动</th>;
</tr>;
</thead>;
<;t车身>;
@foreach($data作为$datas)
<;tr>;
<;td>;{{$datas->;username}}</td>;
<;td>;{{$datas->;contact}}</td>;
<;td>;{{$datas->;email}}</td>;
<;td>;角色类型</td>;
<;td>;
<;div class=“btn集团”>;
<;button type=“button”class=“btn btn info”数据切换=“模式”数据目标=“#编辑模式”>;
<;i class=“fa编辑”></I>;
</按钮>;
<;button type=“button”class=“btn btn info”数据切换=“modal”数据目标=“#删除modal”>;
<;i class=“垃圾桶”></i>;
</按钮>;
</部门>;
</td>;
</tr>;
@endforeach
</t车身>;
</表>;
</部门>;
<;div class=“模态衰减”id=“编辑模态”>;
<;div class=“模态对话框”>;
<;div class=“模态内容”>;
<;div class=“模态标题”>;
<;button type=“button”class=“close”data dismission=“modal”aria label=“close”>;
<;span aria hidden=“true”>&;时代</span>;
</按钮>;
<;h4 class=“模态标题”align=“center”>&书信电报;b>;编辑用户</b></h4>;
</部门>;
<;div class=“模态体”>;
<;form role=“form”action=“/edit_user”>;
<;input type=“hidden”name=“_-token”value=“<;?php-echo-csrf_-token();?>;”>;
<;div class=“箱体”>;
<;div class=“表单组”>;
<;标签for=“exampleInputEmail1”>;用户ID</标签>;
<;输入type=“text”class=“form control”name=“user\u id”占位符=“user id”>;
</部门>;
<;div class=“表单组”>;
<;标签for=“exampleInputEmail1”>;用户名</标签>;
<;输入type=“text”class=“form control”name=“username”占位符=“Enter username”>;
</部门>;
<;div class=“表单组”>;
<;标签for=“exampleInputEmail1”>;电子邮件</标签>;
<;输入type=“text”class=“form control”name=“email”占位符=“Enter email”>;
</部门>;
<;div class=“表单组”>;
<;标签for=“exampleInputEmail1”>;联系</标签>;
<;输入type=“text”class=“form control”name=“contact”占位符=“Enter contact”>;
</部门>;
<;div class=“表单组”>;
<;标签for=“exampleInputEmail1”>;更改密码</标签>;
<;输入type=“password”class=“form control”name=“change\u password”占位符=“Enter password”>;
</部门>;
</部门>;
<;div class=“模态页脚”>;
<;button type=“button”class=“btn btn默认向左拉”数据解除=“模态”>;关闭</按钮>;
<;按钮type=“submit”class=“btn btn primary”>;保存更改</按钮>;
</部门>;
</表格>;
</部门>;
</部门>;
</部门>;
</部门>;
我怎样才能达到预期的输出
这样就足够了
注意:我假设您的项目使用的是bootstrap 4,虽然bootstrap 3也可以,但只要稍微调整一下以满足您的需要即可
$(document).ready(function(){
/**
*用于显示编辑项弹出窗口
*/
$(文档)。在('单击',“#编辑项”,函数()上{
$(this).addClass('edit-item-trigger-clicked');//用于识别单击了哪个触发器,从而从正确的行而不是错误的行中获取数据。
变量选项={
“背景”:“静态”
};
$(“#编辑模式”).model(选项)
})
//论情态剧
$('#edit modal').on('show.bs.modal',function(){
var el=$(“.edit item trigger clicked”);//看看它在这里有多有用?
var行=el.最近(“.数据行”);
//获取数据
变量id=标高数据(“项目id”);
var name=row.children(“.name”).text();
var description=row.children(“.description”).text();
//在输入字段中填写数据
$(“#模式输入id”).val(id);
$(“#模态输入名称”).val(名称);
$(“#模态输入说明”).val(说明);
})
//论模态隐藏
$('#edit modal').on('hide.bs.modal',function(){
$('.edit-item-trigger-clicked')。removeClass('edit-item-trigger-clicked'))
$(“#编辑表单”)。触发器(“重置”);
})
})
<;脚本src=”https://code.jquery.com/jquery-3.2.1.slim.min.js“></脚本>;
<;脚本src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js“></脚本>;
<;link rel=“样式表”href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css“/>;
<;脚本src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js“></脚本>;
<;div class=“主容器流体”>;
<;!--标题-->;
<;div class=“容器流体”>;
<;div class=“行”>;
<;div class=“col”>;
<;h1 class=“text primary mr auto”>;示例列表</h1>;
</部门>;
</部门>;
</部门>;
<;!--/标题-->;
<;!--表-->;
<;table class=“table table striped table bordered”id=“myTable”cellspacting=“0”width=“100%”gt;
<;thead class=“thead dark”>;
<;tr>;
<;th>#</th>;
<;th>;名称</th>;
<;th>;说明</th>;
<;th>;行动</th>;
</tr>;
</thead>;
<;t车身>;
<;tr class=“数据行”>;
<;td class=“对齐中间迭代”>;1</td>;
<;td class=“对齐中间名”>;名称1</td>;
<;td class=“对齐中间分词说明”>;说明1</td>;
<;td class=“中间对齐”>;
<;button type=“button”class=“btn btn success”id=“编辑项”数据项id=“1”>;编辑</按钮>;
</td>;
</tr>;
<;tr class=“数据行”>;
<;td class=“对齐中间迭代”>;2</td>;
<;td class=“对齐中间名”>;名称2</td>;
<;td class=“对齐中间分词说明”>;说明2</td>;
<;td class=“中间对齐”>;
<;button type=“button”class=“btn btn success”id=“编辑项”数据项id=“2”>;编辑</按钮>;
</td>;
</tr>;
</t车身>;
</表>;
<;!--/表-->;
</部门>;
<;!--附件模式-->;
<;div class=“modal fade”id=“edit modal”tabindex=“-1”role=“dialog”aria labelledby=“edit modal label”aria hidden=“true”>;
<;div class=“模态对话框模态lg”role=“文档”>;
<;div class=“模态内容”>;
<;div class=“模态标题”>;
<;h5 class=“模态标题”id=“编辑模态标签”>;编辑数据</h5>;
<;button type=“button”class=“close”data dismission=“modal”aria label=“close”>&书信电报;span aria hidden=“true”>&;时代</span>;
</按钮>;
</部门>;
<;div class=“模态体”id=“附件体内容”>;
<;form id=“edit form”class=“form horizontal”method=“POST”action=”“>;
<;div class=“卡片文本白色背景深mb-0”>;
<;div class=“卡头”>;
<;h2 class=“m-0”和;编辑</h2>;
</部门>;
<;div class=“卡体”>;
<;!--id-->;
<;div class=“表单组”>;
<;label class=“col form label”for=“模态输入id”>;Id(仅供参考,不向公众展示)</标签>;
<;输入类型=“text”name=“模态输入id”class=“表单控制”id=“模态输入id”必填项>;
</部门>;
<;!--/id-->;
<;!--名称-->;
<;div class=“表单组”>;
<;label class=“col form label”for=“模态输入名称”>;名称</标签>;
<;input type=“text”name=“modal input name”class=“form control”id=“modal input name”所需自动对焦>;
</部门>;
<;!--/名称-->;
<;!--说明-->;
<;div class=“表单组”>;
<;label class=“col form label”for=“模态输入描述”>;电子邮件</标签>;
<;输入类型=“text”name=“模态输入说明”class=“表单控制”id=“模态输入说明”必填项>;
</部门>;
<;!--/说明-->;
</部门>;
</部门>;
</表格>;
</部门>;
<;div class=“模态页脚”>;
<;按钮类型=“按钮”类=“btn btn主”数据解除=“模态”>;完成</按钮>;
<;button type=“button”class=“btn btn次要”数据解除=“模态”>;关闭</按钮>;
</部门>;
</部门>;
</部门>;
</部门>;
<;!--/附件模式-->
</