首页 > 解决方案 > 从脚本中获取真或假(来自 JSON 文件)以显示为复选框

问题描述

所以我使用这个脚本从谷歌表格中获取值

$.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) {

  var sheetData = data.feed.entry;

  var i;
  for (i = 0; i < sheetData.length; i++) {

    var timestamp = data.feed.entry[i]['gsx$timestamp']['$t'];
    var checkin = data.feed.entry[i]['gsx$checkin']['$t'];
    var teamname = data.feed.entry[i]['gsx$teamname']['$t'];
    var capdiscord = data.feed.entry[i]['gsx$captainsdiscord']['$t'];
    var adc = data.feed.entry[i]['gsx$adc']['$t'];
    var support = data.feed.entry[i]['gsx$support']['$t'];
    var mid = data.feed.entry[i]['gsx$mid']['$t'];
    var jungle = data.feed.entry[i]['gsx$jungle']['$t'];
    var solo = data.feed.entry[i]['gsx$solo']['$t'];
    var sub1 = data.feed.entry[i]['gsx$sub1']['$t'];
    var sub2 = data.feed.entry[i]['gsx$sub2']['$t'];
    var sub3 = data.feed.entry[i]['gsx$sub3']['$t'];
    var seeding = data.feed.entry[i]['gsx$seeding']['$t'];
    document.getElementById('demo').innerHTML += (
    '<tr>' + '<td>' + timestamp + 
    '</td>' + '<td>' + checkin +
    '</td>' + '<td>' + teamname +
    '</td>' + '<td>' + capdiscord +
    '</td>' + '<td>' + adc +
    '</td>' + '<td>' + support +
    '</td>' + '<td>' + mid +
    '</td>' + '<td>' + jungle +
    '</td>' + '<td>' + solo +
    '</td>' + '<td>' + sub1 +
    '</td>' + '<td>' + sub2 +
    '</td>' + '<td>' + sub3 +
    '</td>' + '<td>' + seeding +
    '</td>' + '</tr>');

  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>

checkin 是一个真值或假值。我希望它是一个实际的复选框,如果为真则检查它,如果为假则不检查。我该怎么写这个?

标签: javascriptjqueryhtml

解决方案


如果 true 添加checked到输入 html

$.getJSON("https://spreadsheets.google.com/feeds/list/1nPL4wFITrwgz2_alxLnO9VBhJQ7QHuif9nFXurgdSUk/1/public/values?alt=json", function(data) {

  var sheetData = data.feed.entry;

  var i;
  for (i = 0; i < sheetData.length; i++) {

    var timestamp = data.feed.entry[i]['gsx$timestamp']['$t'];
    var checkin = data.feed.entry[i]['gsx$checkin']['$t'];
    var teamname = data.feed.entry[i]['gsx$teamname']['$t'];
    var capdiscord = data.feed.entry[i]['gsx$captainsdiscord']['$t'];
    var adc = data.feed.entry[i]['gsx$adc']['$t'];
    var support = data.feed.entry[i]['gsx$support']['$t'];
    var mid = data.feed.entry[i]['gsx$mid']['$t'];
    var jungle = data.feed.entry[i]['gsx$jungle']['$t'];
    var solo = data.feed.entry[i]['gsx$solo']['$t'];
    var sub1 = data.feed.entry[i]['gsx$sub1']['$t'];
    var sub2 = data.feed.entry[i]['gsx$sub2']['$t'];
    var sub3 = data.feed.entry[i]['gsx$sub3']['$t'];
    var seeding = data.feed.entry[i]['gsx$seeding']['$t'];
    if(checkin == 'TRUE'){
      checkin = 'checked';
    }else{
      checkin = '';
    }
    document.getElementById('demo').innerHTML += (
    '<table><tr>' + '<td>' + timestamp + 
    '</td>' + '<td><input type="checkbox" ' + checkin +' />' + 
    '</td>' + '<td>' + teamname +
    '</td>' + '<td>' + capdiscord +
    '</td>' + '<td>' + adc +
    '</td>' + '<td>' + support +
    '</td>' + '<td>' + mid +
    '</td>' + '<td>' + jungle +
    '</td>' + '<td>' + solo +
    '</td>' + '<td>' + sub1 +
    '</td>' + '<td>' + sub2 +
    '</td>' + '<td>' + sub3 +
    '</td>' + '<td>' + seeding +
    '</td>' + '</tr></table>');

  }
});
table, td, tr {
  border: 1px solid black;
}

table {
  border-collapse: collapse;
  width: 100%;
}

th {
  height: 50px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="demo"></div>


推荐阅读