js的form.reder()函数渲染table表格中的下拉框数据

news/2024/10/21 7:40:59/

目录

问题描述

form.reder()函数

简单介绍一下form.reder()

layui官网对于渲染页面的介绍

页面渲染


问题描述

在我的项目中遇到一个问题在table中添加输入框但是下拉输入框中没有我们的数据

如图:

看代码 :

function add(data) {data.forEach((item, index) => {let a = index + 1$('.w100').append("<tr>" +"<input type=\"hidden\" id=\"id\" name=\"id" + a + "\" style=\"text-align: center\"value=" + item.id + ">" +"<td colspan=" + 2 + "><input class='layui-input input-border' type=\"text\" id=\"personStatus" + a + "\" name=\"personStatus\" style=\"text-align: center;width:100%\" value=" + item.personStatus + "></td>" +"<<td colspan=" + 2 + "   style=\"width: 100px;height: 100px;  \">" +"                                         <select style='text-align:center' name=\"statusTime\" id=\"statusTime" + a + "\">\n" +"                                             <option id=\"in" + index + "\"  value=" + title + ">" + title + '年' + "</option>\n" +"                                             <option id=\"befor" + index + "\"   value=" + title + ">" + title + '年以前' + "</option>\n" +"                                          </select>" +"</td>" +
"</tr>");});
list = data;
}

 很明显这里我们的方法是用循环读取的方法写的但是在访问页面的时候输入框就没有数据

form.reder()函数

简单介绍一下form.reder()

form.render(); //更新全部表单数据

select 刷新select选择框渲染

checkbox 刷新checkbox复选框(含开关)渲染

radio 刷新radio单选框框渲染

form.render(); //更新全部

form.render(‘select’); //刷新select选择框渲染

layui官网对于渲染页面的介绍

页面渲染

数据读取完成


http://www.ppmy.cn/news/342651.html

相关文章

【工控老马】欧姆龙PLC Socket发送Fins/TCP命令解析

欧姆龙Socket tool发送Fins/TCP命令 实验设备&#xff1a;CJ2M-CPU33(PLC) 实验目的&#xff1a;发送Fins/TCP命令读写CJ2M-CPU33的数据 实验步骤&#xff1a; 1、 系统概述&#xff0c;硬件搭建和接线&#xff1a; 图1.1 2、软件设置 ①首先在PLC里通过CX-Programmer设置CJ…

动量梯度下降法(gradient descent with momentum)

简介 动量梯度下降法是对梯度下降法的改良版本&#xff0c;通常来说优化效果好于梯度下降法。对梯度下降法不熟悉的可以参考梯度下降法&#xff0c;理解梯度下降法是理解动量梯度下降法的前提&#xff0c;除此之外要搞懂动量梯度下降法需要知道原始方法在实际应用中的不足之处…

VUE+Layui 输入框、下拉选择框、复选框、开关、文本域 数据回显

一、说明二、效果三、代码四、如果失效了 一、说明 用了Layui的界面&#xff0c;加上vue的指令&#xff1a;v-model&#xff0c;v-bind&#xff0c;v-for 等 1、注意&#xff1a;开关按钮如果是关闭状态&#xff1a;status字段是不会在表单提交字段中的&#xff0c;打开了就是s…

【每天一个java设计模式(六)】 - 适配器模式

当某种业务功能已经实现&#xff0c;但它们与当前系统的接口不兼容&#xff0c;如果重新开发成本又很高&#xff0c;这时用适配器模式能很好地解决这些问题。 适配器模式是作为两个不兼容的接口之间的桥梁&#xff0c;属于结构型模式&#xff0c;它结合了两个独立接口的功能。…

HTML期末大作业 ~ 马尔代夫旅游网页设计作业成品 ~ HTML+CSS+JS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计

HTML期末大作业 ~ 大学生旅游官网网页设计作业成品 ~ HTMLCSSJS网页设计期末课程大作业 ~ web前端开发技术 ~ web课程设计网页规划与设计~ 临近期末, 你还在为HTML网页设计结课作业,老师的作业要求感到头大&#xff1f;HTML网页作业无从下手&#xff1f;网页要求的总数量太多&…

深度学习入门:一句话告诉你什么是神经网络(CNN,RNN,DNN)

神经网络技术起源于上世纪五、六十年代&#xff0c;当时叫感知机&#xff08;perceptron&#xff09;&#xff0c;拥有输入层、输出层和一个隐含层。输入的特征向量通过隐含层变换达到输出层&#xff0c;在输出层得到分类结果。早期感知机的推动者是Rosenblatt。&#xff08;扯…

乐phone C101、W100、 W101、 S1 刷机一站式解决

注意&#xff1a; 1.本教程刷机过程需要在Windows操作系统环境下进行。 2.本教程只针对乐phone C101、W100、 W101、 S1。 3.请确认自己的机型下载对应的刷机文件。 4.刷机有风险&#xff0c;务必要小心&#xff1b;因刷机造成的任何问题&#xff0c;本人不承担任何责任。 5.因…

SA实战 ·《SpringCloud Alibaba实战》第10章-服务容错:项目整合Sentinel实现限流与容错

作者:冰河 星球:http://m6z.cn/6aeFbs 博客:https://binghe.gitcode.host 文章汇总:https://binghe.gitcode.host/md/all/all.html 大家好,我是冰河~~ 一不小心《SpringCloud Alibaba实战》专栏都更新到第10章了,再不上车就跟不上了,小伙伴们快跟上啊! 注意:本项目完…