Jquery解析json数据到表，但我隐藏了列

jquery parsing json data to table but i ve hidden columns

本文关键字：隐藏 解析 json 数据 Jquery      更新时间：2023-09-26

我正在用jquery mobile和json编写一个移动应用程序。我有两个不同的问题，

1)我有一个json数据，例如id, name，姓，point, mail，我有一个表来列出这些数据，但在开始我隐藏邮件列在表中，我有一个"列显示"按钮。用户可以更改要显示的列。当我想添加一个新的数据线，我有隐藏列的问题，我使用append(tr)方法，这段代码使新的数据隐藏列可见。

2)我的第二个问题是，我用jsonlint检查我的json数据，它说我的数据是好的!我有两个不同的记录器，但是当我使用这个函数时，数据。长度为527,datam[i].name未定义

function drawTable(datam) {
var tr;
for (var i = 0; i < 2; i++) {
    tr = $('<tr/>');
    tr.append("<td>1 " + datam.id + " data l : "+ datam.length+"</td>");
    tr.append("<td>" + datam[i].name + "</td>");
    tr.append("<td>" + datam[i].latitude + "</td>");
    tr.append("<td>" + datam[i].longitude+ "</td>");
    $('#mytbl').append(tr);
}

}

如何隐藏您谈论的邮件列?因为如果你对DOM执行jQuery查询，然后对它们使用"hide"，它只会对当前存在的元素生效，而不会对之后创建的元素生效。您可以使用一个变量来确定该列是否应该显示，并为相应的列添加一个类。

var show = true;
function addRow()
{
    var tr = $('<tr/>'); //create row
    var td1 = $('<td>').text('new Col 1'); //create first col
    var td2 = $('<td>').text('new Col 2').addClass('optional'); //create second col
  
    if( !show )td2.addClass('hide'); //hide second col if show is false
  
    tr.append(td1);
    tr.append(td2);
  
    $('#mytbl').append(tr);
}
function toggleShow()
{
  
  show = !show;
  toggleDisplay();
}
function toggleDisplay(){
  if( !show ) $('#mytbl .optional').addClass('hide');
  else $('#mytbl  .optional').removeClass('hide');
}
.hide
{
  display:none;
}
table td{
  border: 1px solid #000;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="addRow()">Add Row</button>
<button onclick="toggleShow()">Hide Columns</button>
<table id="mytbl">
  <tr>
    <td>Col 1</td>
    <td class="optional">Col 2</td>
  </tr>
</table>

相关文章：