首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

如何使用trHtML +=在将Json返回到表中使用if-else条件

使用trHTML +=在将Json返回到表中使用if-else条件的方法如下:

  1. 首先,确保你已经获取到了需要返回的Json数据。
  2. 创建一个空的字符串变量,用于存储生成的HTML代码。
  3. 使用for循环遍历Json数据,获取每个对象的属性值。
  4. 在循环中,使用if-else条件判断来根据属性值生成不同的HTML代码。
  5. 将生成的HTML代码添加到之前创建的字符串变量中,使用trHTML +=来实现字符串的拼接。
  6. 循环结束后,将生成的HTML代码插入到表格中。

下面是一个示例代码:

代码语言:txt
复制
// 假设你已经获取到了Json数据
var jsonData = [
  { name: "John", age: 25, gender: "Male" },
  { name: "Jane", age: 30, gender: "Female" },
  { name: "Tom", age: 35, gender: "Male" }
];

// 创建一个空的字符串变量
var trHTML = "";

// 使用for循环遍历Json数据
for (var i = 0; i < jsonData.length; i++) {
  var person = jsonData[i];

  // 使用if-else条件判断生成不同的HTML代码
  if (person.gender === "Male") {
    trHTML += "<tr><td>Mr. " + person.name + "</td><td>" + person.age + "</td></tr>";
  } else {
    trHTML += "<tr><td>Ms. " + person.name + "</td><td>" + person.age + "</td></tr>";
  }
}

// 将生成的HTML代码插入到表格中
document.getElementById("tableBody").innerHTML = trHTML;

在上面的示例代码中,我们使用了一个简单的if-else条件判断来根据每个人的性别生成不同的HTML代码。根据性别的不同,我们在表格中显示不同的称呼("Mr."或"Ms.")。

请注意,这只是一个示例,你可以根据实际需求和Json数据的结构来进行相应的修改和扩展。

推荐的腾讯云相关产品和产品介绍链接地址:

  • 云服务器(CVM):https://cloud.tencent.com/product/cvm
  • 云数据库 MySQL 版(CDB):https://cloud.tencent.com/product/cdb
  • 人工智能(AI):https://cloud.tencent.com/product/ai
  • 云存储(COS):https://cloud.tencent.com/product/cos
  • 区块链(BCS):https://cloud.tencent.com/product/bcs
  • 腾讯云元宇宙:https://cloud.tencent.com/solution/virtual-universe
页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

如何使用StreamSets实时采集Kafka嵌套JSON数据并写入Hive

》、《如何使用StreamSets实现MySQL变化数据实时写入Kudu》、《如何使用StreamSets实现MySQL变化数据实时写入HBase》、《如何使用StreamSets实时采集Kafka...并入库Kudu》和《如何使用StreamSets实时采集Kafka数据并写入Hive》,本篇文章Fayson主要介绍如何使用StreamSets实时采集Kafka嵌套的JSON数据并将采集的数据写入...3.StreamSets查看kafka2hive_json的pipline运行情况 ? 4.使用sdc用户登录Hue查看ods_user数据 ?...嵌套的JSON数据解析为3条数据插入到ods_user。...5.总结 ---- 1.使用StreamSets的Kafka Consumer模块接入Kafka嵌套的JSON数据后,无法直接数据入库到Hive,需要将嵌套的JSON数据解析,这里可以使用Evaluator

4.8K51
  • 优化if-else代码的八种方案

    前言 代码如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文介绍优化if-else代码的八种方案。 ?...condition){ return ; } //doSomething 优化方案二:使用条件三目运算符 使用条件三目运算符可以简化某些if-else,使代码更加简洁,更具有可读性。...80:100; 优化方案三:使用枚举 某些时候,使用枚举也可以优化if-else逻辑分支,按个人理解,它也可以看作一种驱动方法。...驱动方法是一种使你可以查找信息,而不必用很多的逻辑语句(if或case)来把它们找出来的方法。以下的demo,把map抽象成map查找信息,而省去不必要的逻辑语句。...if-else代码重构成高质量代码 如何 “干掉” if...else

    1K10

    设计模式在外卖营销业务的实践

    如果脱离具体的业务逻辑去学习或者使用设计模式,那是极其空洞的。接下来我们通过外卖营销业务的实践,来探讨如何用设计模式来实现可重用、易维护的代码。...例如,是否使用红包下单,是否红包有效期内下单,订单是否满足一定的优惠金额等等条件。当满足这些条件以后,我们订单信息放入延迟队列中进行后续处理。...当然,设计模式,也有一种能够表述系统状态的代码模型,那就是状态模式。邀请下单系统,我们的主要流程是奖。对于奖,每一个状态要进行的动作和操作都是不同的。...我们的应用场景,状态数量以及状态转换远比上述例子复杂,通过“状态模式”避免了大量的if-else代码,让我们的逻辑变得更加清晰。...我们的系统,后台的过滤规则会经常变动,规则和规则之间可能也会存在传递关系,通过责任链模式,我们规则与规则分开,规则与规则之间的传递关系通过Spring注入到List,形成一个链的关系。

    1.1K20

    React 条件渲染最佳实践(7 种方法)

    javascript ,我们通常使用if else 语句,switch case语句和三元运算符编写条件渲染。 以上所有这些方法都适用于 React。但是问题是,我们如何才能有效地使用它们?... JSX ,我们应该使用其他条件渲染方法,例如三元运算符和&&运算符。在这里,我们讨论更多细节。 以下是我积累的 7 种条件渲染方法,它们可以 React 中使用。...你也可以 JSX 中使用三元运算符,而不是 if-else 与立即调用函数表达式(IIFE)一起使用。 假设我们要基于 isShow 状态有条件地渲染一个小组件。您可以这样编写条件渲染。... : null}; if-else if-else使用三元运算符 在上面的示例,我仅向你展示如何使用三元运算符替换 if-else 语句。...枚举对象拆分到单独文件来复用 关于使用枚举对象进行条件渲染的最好的特性是可以复用。 回到示例案例,Alert 组件是 React 通常可重用的组件。因此,当你要有条件地渲染它时,也可以让它复用。

    5.8K20

    慕课网Flask高级编程实战-2.搜索书籍路由编写

    知识点: 简化if-else语句的几种方式 1.使用三元表达式 ;2.if+return;3.if-else里的代码提取成函数 if+return的理解:把最后一句return前的if+return...()返回结果序列化成json;4.r.text 返回结果不做处理直接返回 4.requests vs urllib 发送http请求的两种方法: 1.使用urllib(python内置) 2.使用...2.尝试拆分模块 思路,试图函数抽离到单独的包,然后新的试图文件引入flask.py来导入app核心对象。...蓝色线执行终止,重新回到2. book导入fisher的语句。 4.继续向下执行book app.route注册路由的语句。然后book执行完,回到fisher主流程执行。...5.找不到视图函数的最终解释和证明 整个流程,出现了两次核心app对象的初始化,注册路由是蓝色流程初始化的app注册的。

    1K30

    设计模式之策略者模式

    策略者模式现实世界的使用很多,比如互金场景的优惠券模式,可以分为本金券,现券,加息券,增收券等,每种卡券给予用户享受不同的权益,如果有一天增加了新的优惠券,也很容易扩展进去。...,产品周期{productCircle},经计算现1.2元"); 15: 16: return 1.2M; 17: } 18: } 19:...,产品周期{productCircle},经计算现12元"); 33: 34: return 12M; 35: } 36: } 37:...,产品周期{productCircle},经计算现5.5元"); 69: 70: return 5.5M; 71: } 72: } 策略者上线文类...,我们可以做一个这样的思考,当代码或者即将编写的功能需要配合大量的if-else,其中的代码会较为复杂,并且这些产生if-else出现了较强的逻辑上的关联,外界也根本不关注其中的具体实现,加入一层抽象层后

    63320

    在工作中常用到的SQL

    很多时候我们group by了以后,还想要查询结果包含group by之外的字段(一般情况下,我们都不可能将group by 涵盖所有的字段),我们就可以上面那样,查询后的结果作为子查询,放在外部查询的...下面我简单解释一下: 上面说了,join的时候一定要写关联条件,如果是inner join的话,只有符合关联条件的数据才会存在最大 如果是left join的话,即便关联条件不符合,左边的数据一定会存在大...如果是right join的话,即便关联条件不符合,右边的数据一定会存在大 看下面的图: ?...如果是right join,那么我们最后的只有两条数据 三、回顾case when SQL的case when then else end用法其实跟我们程序语言中的if-else很是类似,写SQL...我这边会有这种情况:json数据存到MySQL上。

    64830

    Java面试:2021.05.18

    实例池(Object Pooling):循环使用对象,减少资源初始化和释放时的昂贵损耗。 3、如何判断GC是否存在问题?...如果脱离具体的业务逻辑去学习或者使用设计模式,那是极其空洞的。接下来我们通过外卖营销业务的实践,来探讨如何用设计模式来实现可重用、易维护的代码。...例如,是否使用红包下单,是否红包有效期内下单,订单是否满足一定的优惠金额等等条件。当满足这些条件以后,我们订单信息放入延迟队列中进行后续处理。...我们的应用场景,状态数量以及状态转换远比上述例子复杂,通过“状态模式”避免了大量的if-else代码,让我们的逻辑变得更加清晰。...我们的系统,后台的过滤规则会经常变动,规则和规则之间可能也会存在传递关系,通过责任链模式,我们规则与规则分开,规则与规则之间的传递关系通过Spring注入到List,形成一个链的关系。

    77220

    编写 if 时不带 else,你的代码会更好!

    Method without value checks 没有价值验证的情况下执行该方法没有任何意义。因此,允许方法继续执行之前,我们需要检查一些先决条件。...4 If-Else 转换为字典—完全避免 If-Else 假设您需要执行一些操作,这些操作根据某些条件进行选择,我们知道以后必须添加更多操作。 ? 也许有人倾向于使用久经考验的 If-Else。...首先,我们只有两种字符串表示形式:JSON 和纯文本。在此阶段使用 If-Else 并不是什么大问题,如果我们可以轻松替换其他,只要如前所述即可。 ?...正确的方法是遵循 SOLID 原则的方法 - 我们通过实施动态类型发现过程(本例为策略模式)来做到这一点。...重构这个混乱的过程的过程如下: 使用公共接口每个分支提取到单独的策略类 动态查找实现通用接口的所有类 根据输入决定执行哪种策略 替换上面示例的代码如下所示。是的,这是更多代码的方式。

    93660

    在工作中常用到的SQL

    前言 本文转自公众号【Java3y】 最近在公司做了几张报表,还记得刚开始要做报表的时候都快把SQL给忘光了(当时广州休假了1个月多,实习期间也没咋写过SQL),回到公司的第一个需求就是做报表。...下面我简单解释一下: 上面说了,join的时候一定要写关联条件,如果是inner join的话,只有符合关联条件的数据才会存在最大 如果是left join的话,即便关联条件不符合,左边的数据一定会存在大...如果是right join的话,即便关联条件不符合,右边的数据一定会存在大 看下面的图: ?...如果是right join,那么我们最后的只有两条数据 三、回顾case when SQL的case when then else end用法其实跟我们程序语言中的if-else很是类似,写SQL...我这边会有这种情况:json数据存到MySQL上。

    68630

    JqGridView 1.0.0.0发布

    前几个月,客户要求显示列表做到列锁定+表头锁定+列组合,但从Extjs到Jquery EasyUi,从Jquery Grid到Telerik等等组件,发现无一符合条件,要么只能用列锁定,要么只能用列组合...设计思路 开始之前,总得理下思路。我CSS不行,JS一般,但是我有思路,先看看下面两个图: ? z ?...其中,锁定列表头、锁定列数据列、非锁定列表头均无滚动条,滚动条全非锁定列数据列,但拖动右侧滚动条,需要联动锁定列数据行,但拖动底部滚动条,需联动非锁定列表头。 我认为,磨刀不误砍柴工。...样例 首先举几个例子来说明如何使用: 简单单行表头 $(function() { $.jqGridView...样式 既然决定使用div,那么样式少不了。

    67320

    Java基础知识-if条件语句的使用介绍

    这章节给大家介绍一下Java中经常使用的if条件语句是如何使用的和在项目开发过程if语句的注意事项。 1.首先就是最基础的写法if(boolean类型) 和if(boolean类型)-else。...2.如果是想要判断多个条件的情况下可以使用if-else if-else这种结构来,下面看看具体案例介绍: //if条件语句中最复杂的写法:if-else if-if。...; // } //下面说下if使用过程的注意事项, // 1.项目实际开发if语句尽量不要嵌套太多层,这样可读性会大大的降低。...// 2.最后一个else使用的过程要考虑清楚,因为如果你要是if条件考虑不全,错误的情况下都会在else执行。...// 3.使用equals要格外小心,因为如果"value1".equals(value2) value1为空的情况就会报错。

    1.3K50

    在工作中常用到的SQL

    来源:Java3y | 作者:Java3y 最近在公司做了几张报表,还记得刚开始要做报表的时候都快把SQL给忘光了(当时广州休假了1个月多,实习期间也没咋写过SQL),回到公司的第一个需求就是做报表...下面我简单解释一下: 上面说了,join的时候一定要写关联条件,如果是inner join的话,只有符合关联条件的数据才会存在最大 如果是left join的话,即便关联条件不符合,左边的数据一定会存在大...如果是right join的话,即便关联条件不符合,右边的数据一定会存在大 看下面的图: ?...如果是right join,那么我们最后的只有两条数据 三、回顾case when SQL的case when then else end用法其实跟我们程序语言中的if-else很是类似,写SQL...我这边会有这种情况:json数据存到MySQL上。

    51510

    在工作中常用到的SQL

    最近在公司做了几张报表,还记得刚开始要做报表的时候都快把SQL给忘光了(当时广州休假了1个月多,实习期间也没咋写过SQL),回到公司的第一个需求就是做报表。...下面我简单解释一下: 上面说了,join的时候一定要写关联条件,如果是inner join的话,只有符合关联条件的数据才会存在最大 如果是left join的话,即便关联条件不符合,左边的数据一定会存在大...如果是right join的话,即便关联条件不符合,右边的数据一定会存在大 看下面的图: ?...如果是right join,那么我们最后的只有两条数据 三、回顾case when SQL的case when then else end用法其实跟我们程序语言中的if-else很是类似,写SQL...我这边会有这种情况:json数据存到MySQL上。

    56820

    8种优化if-else代码的方案请拿走

    前言 代码如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文介绍优化if-else代码的八种方案。 ?...condition){ return ;}//doSomething 优化方案二:使用条件三目运算符 使用条件三目运算符可以简化某些if-else,使代码更加简洁,更具有可读性。...80:100; 优化方案三:使用枚举 某些时候,使用枚举也可以优化if-else逻辑分支,按个人理解,它也可以看作一种驱动方法。...Optional 有时候if-else比较多,是因为非空判断导致的,这时候你可以使用java8的Optional进行优化。...驱动方法是一种使你可以查找信息,而不必用很多的逻辑语句(if或case)来把它们找出来的方法。以下的demo,把map抽象成map查找信息,而省去不必要的逻辑语句。

    1.3K20

    优化if-else代码的八种方案

    前言 代码如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文介绍优化if-else代码的八种方案。...condition){ return; } //doSomething 优化方案二:使用条件三目运算符 使用条件三目运算符可以简化某些if-else,使代码更加简洁,更具有可读性 优化前: int...80 : 100; 优化方案三:使用枚举 某些时候,使用枚举也可以优化if-else逻辑分支,按个人理解,它也可以看作一种驱动方法。...Optional 有时候if-else比较多,是因为非空判断导致的,这时候你可以使用java8的Optional进行优化。...驱动方法是一种使你可以查找信息,而不必用很多的逻辑语句(if或case)来把它们找出来的方法。 以下的demo,把map抽象成map查找信息,而省去不必要的逻辑语句。

    65320

    优化if-else代码的八种方案!

    前言 代码如果if-else比较多,阅读起来比较困难,维护起来也比较困难,很容易出bug,接下来,本文介绍优化if-else代码的八种方案。 ?...condition){ return ; } //doSomething 优化方案二:使用条件三目运算符 使用条件三目运算符可以简化某些if-else,使代码更加简洁,更具有可读性。...80:100; 优化方案三:使用枚举 某些时候,使用枚举也可以优化if-else逻辑分支,按个人理解,它也可以看做一种驱动方法。...Optional 有时候if-else比较多,是因为非空判断导致的,这时候你可以使用java8的Optional进行优化。...驱动方法是一种使你可以查找信息,而不必用很多的逻辑语句(if或Case)来把它们找出来的方法。以下的demo,把map抽象成map查找信息,而省去不必要的逻辑语句。

    2.5K50

    替换If-Else的5种方法从入门到高级示例

    > Method without value checks 没有价值验证的情况下执行该方法没有任何意义。因此,允许方法继续执行之前,我们需要检查一些先决条件。...4、If-Else转换为字典—完全避免If-Else 假设您需要执行一些操作,这些操作根据某些条件进行选择,我们知道以后必须添加更多操作。 也许有人倾向于使用久经考验的If-Else。...首先,我们只有两种字符串表示形式:JSON和纯文本。在此阶段使用If-Else并不是什么大问题,如果我们可以轻松替换其他,只要如前所述即可。...正确的方法是遵循SOLID原则的方法-我们通过实施动态类型发现过程(本例为策略模式)来做到这一点。...重构这个混乱的过程的过程如下: 使用公共接口每个分支提取到单独的策略类 动态查找实现通用接口的所有类 ·根据输入决定执行哪种策略 替换上面示例的代码如下所示。是的,这是更多代码的方式。

    4.7K30
    领券