Question

我只想使用JSON显示Linda的详细信息。但是，我对如何做到这一点一无所知。需要一些建议，谢谢！

输出应仅显示“ Linda”而不是我当前的输出，以显示更新后的表。

实际问题：使用JSON，将Linda的移动电话修改为88885555，并仅显示Linda的详细信息。

我的雇员对象应该来自.json文件，但我找不到要插入此帖子的格式。因此，我将其合并到我的.js文件中。

var employees = [
  {
    "Name": "Tony",
    "Mobile": 99221111,
    "Email": "tony@json.com"
  },
  {
    "Name": "Linda",
    "Mobile": 98981111,
    "Email": "linda@json.com"
  },
  {
    "Name": "Patrick",
    "Email": "patrick@json.com"
  },
  {
    "Name": "Isabella",
    "Mobile": 99552222
  }
];

employees[1].Mobile = 88885555;

function buildHtmlTable() {
  var columns = addAllColumnHeaders(employees);

  for (var i = 0; i < employees.length; i++) {
    var row$ = $('<tr/>');
    
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = employees[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));
    }
    
    $("#employeeTable").append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(employees) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < employees.length; i++) {
    var rowHash = employees[i];
    
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  
  $("#employeeTable").append(headerTr$);

  return columnSet;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body onLoad="buildHtmlTable()">
  <table id="employeeTable" border="1"></table>
</body>

Answer 1

您可以创建一个接受“员工姓名”，public class CalendarDayData : BaseINPC { public CalendarDayData() { } public int DayNumber { get; set; } public int ReminderStart { get; set; } public int ReminderFrequency { get; set; } public string Message { get; set; } private bool _selectedDay = false; public bool SelectedDay { get { return _selectedDay; } set { if (_selectedDay != value) { _selectedDay = value; SetProperty(ref _selectedDay, value); } } } }和.not()的函数，以匹配.is()中<td>所在的任何<tr>元素等于传递给函数的参数，链.textContent将匹配元素的.hide()设置为display。

要显示所有"none"元素，可以使用<tr>。

使用$("#employeeTable tr").show()代替jQuery(function(){})元素上的onload属性事件处理程序。

<body>

var employees = [{
    "Name": "Tony",
    "Mobile": 99221111,
    "Email": "tony@json.com"
  },
  {
    "Name": "Linda",
    "Mobile": 98981111,
    "Email": "linda@json.com"
  },
  {
    "Name": "Patrick",
    "Email": "patrick@json.com"
  },
  {
    "Name": "Isabella",
    "Mobile": 99552222
  }
];


employees[1].Mobile = 88885555;

function buildHtmlTable() {
  var columns = addAllColumnHeaders(employees);

  for (var i = 0; i < employees.length; i++) {
    var row$ = $('<tr/>');
    for (var colIndex = 0; colIndex < columns.length; colIndex++) {
      var cellValue = employees[i][columns[colIndex]];

      if (cellValue == null) {
        cellValue = "";
      }

      row$.append($('<td/>').html(cellValue));
    }
    $("#employeeTable").append(row$);
  }
}

// Adds a header row to the table and returns the set of columns.
// Need to do union of keys from all records as some records may not contain
// all records
function addAllColumnHeaders(employees) {
  var columnSet = [];
  var headerTr$ = $('<tr/>');

  for (var i = 0; i < employees.length; i++) {
    var rowHash = employees[i];
    for (var key in rowHash) {
      if ($.inArray(key, columnSet) == -1) {
        columnSet.push(key);
        headerTr$.append($('<th/>').html(key));
      }
    }
  }
  $("#employeeTable").append(headerTr$);

  return columnSet;
}

Answer 2

如果我正确理解了您的问题，则可以执行以下操作。我使用了if myString.isEmpty { print("its empty. Means it is just two double quotes without anything between") }，所以您可以看到从原始输出到更新输出的过渡：

setTimeout

function buildTable(arr) {
  let html = "<table border='1' style='width: 100%'>";
  for (let i = 0; i < arr.length; i++) {
    html += `<tr>
      <td>${arr[i].Name   || ''}</td>
      <td>${arr[i].Mobile || ''}</td>
      <td>${arr[i].Email  || ''}</td>
    </tr>`;
  }
  html += "</table>";
  return html;
}

function init() {
  const LINDA_IDX = 1;
  container.innerHTML = buildTable(employees);
  setTimeout(function() { //
    //Update Linda's phone number
    employees[LINDA_IDX].Mobile = 88885555;
    //Show just Linda in the table
    container.innerHTML = buildTable([employees[LINDA_IDX]])
  }, 2000);
}

var employees = [{
  "Name": "Tony",
  "Mobile": 99221111,
  "Email": "tony@json.com"
}, {
  "Name": "Linda",
  "Mobile": 98981111,
  "Email": "linda@json.com"
}, {
  "Name": "Patrick",
  "Email": "patrick@json.com"
}, {
  "Name": "Isabella",
  "Mobile": 99552222
}];

var container = document.querySelector('#container');

init();

如何使用JSON仅显示Linda的详细信息

2 个答案: