个人中心
gpt4 book ai didi

javascript - 现在呈现的 JSON2html 表试图更改 bool 单元格的文本值颜色

转载 作者：太空宇宙 更新时间：2023-11-04 08:04:22 25 4
gpt4 key购买 nike

我正在使用 JSON2html 将虚拟数据解析为表格。每行的最后一个 td 是一个 bool 值。我意识到这可能是一件很容易完成的事情，但出于某种原因，我尝试过的任何事情都没有奏效。我正在嵌入我的代码。我希望文本在 false 时变为绿色，在 true 时变为红色。

var data = [{
    "id": 1,
    "first_name": "Lemar",
    "last_name": "Rutherfoord",
    "gender": "Male",
    "hr": 142,
    "resp": 86,
    "temp": 99.3,
    "wandering history": "true"
  }, {
    "id": 2,
    "first_name": "Jo-ann",
    "last_name": "Brack",
    "gender": "Female",
    "hr": 115,
    "resp": 22,
    "temp": 104.1,
    "wandering history": "true"
  }, {
    "id": 3,
    "first_name": "Ogdon",
    "last_name": "Reiach",
    "gender": "Male",
    "hr": 81,
    "resp": 16,
    "temp": 98.5,
    "wandering history": "false"
  },
  {
    "id": 4,
    "first_name": "Brigida",
    "last_name": "Puttan",
    "gender": "Female",
    "hr": 98,
    "resp": 60,
    "temp": 95.6,
    "wandering history": "true"
  },
  {
    "id": 5,
    "first_name": "Doretta",
    "last_name": "Limbourne",
    "gender": "Female",
    "hr": 87,
    "resp": 15,
    "temp": 96.5,
    "wandering history": "false"
  },
  {
    "id": 6,
    "first_name": "Coraline",
    "last_name": "Millen",
    "gender": "Female",
    "hr": 19,
    "resp": 19,
    "temp": 95.2,
    "wandering history": "false"
  },
  {
    "id": 7,
    "first_name": "Brian",
    "last_name": "Klampt",
    "gender": "Male",
    "hr": 144,
    "resp": 77,
    "temp": 102.2,
    "wandering history": true
  },
  {
    "id": 8,
    "first_name": "Pippy",
    "last_name": "Grieswood",
    "gender": "Female",
    "hr": 67,
    "resp": 50,
    "temp": 94.3,
    "wandering history": "false"
  }
];
var transform = {
  tag: 'tr',
  children: [{
    "tag": "td",
    "html": "${id}"
  }, {
    "tag": "td",
    "html": "${first_name} ${last_name}"
  }, {
    "tag": "td",
    "html": "${gender}"
  }, {
    "tag": "td",
    "html": "${hr}"
  }, {
    "tag": "td",
    "html": "${temp}"
  }, {
    "tag": "td",
    "html": "${resp}"
  }, {
    "tag": "td class = 'atRisk'",
    "html": "${wandering history}"
  }]
};

// 	if($('.atRisk') === "true"){

// 		$('.attRisk').addCss('color','red');

// 	} else {
// 		$('.atRisk').css('color','green');
// 	}
// 		});
// if($('.atRisk').val()){
// 	$('.atRisk').css('color','red');
// }else {
// 	$('.atRisk').addClass('green');
// }

$('#placar > tbody ').json2html(data, transform);
// var wander = document.querySelectorAll('history');

// console.log(wander);
// $.each(wander != true){
// 	console.log('not true');
// }

//alert(wander);
$('.atRisk').each(function() {
  if ($(this).val() != true) {
    $(this).css('color', 'green');
  }
});
.atRisk {
  color: red;
}
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <p></p>
    <table id="placar" class=" table table-bordered table-hover">
      <thead class="thead-inverse">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Heart Rate</th>
          <th>Temperature</th>
          <th>Respirations</th>
          <th>Previous Wandering Events</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>

最佳答案

两个问题:

1 - 您正在寻找标签中不存在的 val()；我将其改为查找 .text()。

2 - 我仍然需要逐个比较字符串。那可能只是我的代码，您可能可以做一些更清晰的事情。

在脚本末尾查看我的评估代码。

(此外，如果我的红/绿颠倒了，我也不会感到惊讶。

var data = [{
    "id": 1,
    "first_name": "Lemar",
    "last_name": "Rutherfoord",
    "gender": "Male",
    "hr": 142,
    "resp": 86,
    "temp": 99.3,
    "wandering history": "true"
  }, {
    "id": 2,
    "first_name": "Jo-ann",
    "last_name": "Brack",
    "gender": "Female",
    "hr": 115,
    "resp": 22,
    "temp": 104.1,
    "wandering history": "true"
  }, {
    "id": 3,
    "first_name": "Ogdon",
    "last_name": "Reiach",
    "gender": "Male",
    "hr": 81,
    "resp": 16,
    "temp": 98.5,
    "wandering history": "false"
  },
  {
    "id": 4,
    "first_name": "Brigida",
    "last_name": "Puttan",
    "gender": "Female",
    "hr": 98,
    "resp": 60,
    "temp": 95.6,
    "wandering history": "true"
  },
  {
    "id": 5,
    "first_name": "Doretta",
    "last_name": "Limbourne",
    "gender": "Female",
    "hr": 87,
    "resp": 15,
    "temp": 96.5,
    "wandering history": "false"
  },
  {
    "id": 6,
    "first_name": "Coraline",
    "last_name": "Millen",
    "gender": "Female",
    "hr": 19,
    "resp": 19,
    "temp": 95.2,
    "wandering history": "false"
  },
  {
    "id": 7,
    "first_name": "Brian",
    "last_name": "Klampt",
    "gender": "Male",
    "hr": 144,
    "resp": 77,
    "temp": 102.2,
    "wandering history": true
  },
  {
    "id": 8,
    "first_name": "Pippy",
    "last_name": "Grieswood",
    "gender": "Female",
    "hr": 67,
    "resp": 50,
    "temp": 94.3,
    "wandering history": "false"
  }
];
var transform = {
  tag: 'tr',
  children: [{
    "tag": "td",
    "html": "${id}"
  }, {
    "tag": "td",
    "html": "${first_name} ${last_name}"
  }, {
    "tag": "td",
    "html": "${gender}"
  }, {
    "tag": "td",
    "html": "${hr}"
  }, {
    "tag": "td",
    "html": "${temp}"
  }, {
    "tag": "td",
    "html": "${resp}"
  }, {
    "tag": "td class='atRisk'",
    "html": "${wandering history}"
  }]
};

// 	if($('.atRisk') === "true"){

// 		$('.attRisk').addCss('color','red');

// 	} else {
// 		$('.atRisk').css('color','green');
// 	}
// 		});
// if($('.atRisk').val()){
// 	$('.atRisk').css('color','red');
// }else {
// 	$('.atRisk').addClass('green');
// }

$('#placar > tbody ').json2html(data, transform);
// var wander = document.querySelectorAll('history');

// console.log(wander);
// $.each(wander != true){
// 	console.log('not true');
// }

//alert(wander);
$('.atRisk').each(function() {
  if ($(this).text().toLowerCase() != "true") {
    $(this).css('color', 'green');
  }
});
.atRisk {
  color: red;
}
<head>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" rel="stylesheet" />
</head>

<body>

  <div class="container">
    <p></p>
    <table id="placar" class=" table table-bordered table-hover">
      <thead class="thead-inverse">
        <tr>
          <th>ID</th>
          <th>Name</th>
          <th>Gender</th>
          <th>Heart Rate</th>
          <th>Temperature</th>
          <th>Respirations</th>
          <th>Previous Wandering Events</th>
        </tr>
      </thead>
      <tbody></tbody>
    </table>
  </div>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/json2html/1.0.0/json2html.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.json2html/1.0.0/jquery.json2html.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
</body>

关于javascript - 现在呈现的 JSON2html 表试图更改 bool 单元格的文本值颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46776652/

25 4 0
文章推荐： html - 风格不以形式改变
文章推荐： python - 将 python 数据框传递给对象并更改数据框
文章推荐： python wtf AttributeError : 'ObjectIdField' object has no attribute 'help_text'
文章推荐： css - 页脚始终位于移动设备和桌面设备的底部 CSS
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com