javascript - 隐藏来自 JSON 的第一列

Question

我将带来 json 数据并在成功调用时进行绑定(bind)。所以我的json如下

我想要的是，我想隐藏第一列 APP_MST_ID 及其值 1.0。

我按照以下格式绑定(bind)数据

success: function (data) {

  var html = '';

  if (data == "") {
    $("#dvTable").html('No Data Found');
  }

  else {
    var i = 0;

    var rData = JSON.parse(data);

    if (rData.length !== 0) {

      html += '<div class="table-responsive"><table class="table table-blue">';

      for (var key in rData) {

        var row = rData[key];

        if (key == 0) {
          html += '<tr>';
          for (var key2 in row) {
            html += '<th>';
            html += key2;
            html += '</th>';
          }
          html += '</tr>';
        }

        html += '<tr>';

        for (var key2 in row) {

          if (ddlSelectedVal == "Application") {
            if (i == 1) {
              html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else if (ddlSelectedVal == "Services") {
            if (i == 1) {
              html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
            }
            else {
              html += '<td>';
              html += row[key2];
            }
          }

          else {
            html += '<td>';
            html += row[key2];
          }

          i++;

          html += '</td>';
        }

        i = 0;
        html += '</tr>';
      }
      html += '</table></div>';
    }

    else {
      html += "No Data Found";
    }

    $("#dvTable").html(html);
  }
}

那么我怎样才能隐藏该列及其值。请提出建议。

Answer 1

第一个选项:只是不要将其包含在循环中。

标题上的通知有 key2 != 'APP_MST_ID'不包括 <th>

在正文上，您可以添加 else if (i != 0)

注意:确保APP_MST_ID是对象的第一个元素。

$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        if (key2 != 'APP_MST_ID') {
          html += '<th>';
          html += key2;
          html += '</th>';
        }
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else if (i != 0) {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>

第二个选项:添加后使用 jQuery 隐藏

$(function() {
  var rData = [{
    "APP_MST_ID": 1.0,
    "APPLICATIONNAME": "LCO Mapping Application",
    "URL": "Jiogis.ril.com/GraniteReverseIntegration//Test",
    "PROJECTNO": "R4G-25-APD-128",
    "VSSFOLDERLOC": "$/R4GGISNEPRODUCTION/128_LCO Mapping/02_Source_Code",
    "SPOCUSER": "Prasad1.shinde",
    "REQUESTEDBY": "Sanjive.kumar",
    "DELIVERYMANAGER": "Jaganmohan.kudikala"
  }];
  var html = "";
  var ddlSelectedVal = "Application";
  var i = 0;

  html += '<div class="table-responsive"><table class="table table-blue">';

  for (var key in rData) {

    var row = rData[key];

    if (key == 0) {
      html += '<tr>';
      for (var key2 in row) {
        html += '<th>';
        html += key2;
        html += '</th>';
      }
      html += '</tr>';
    }

    html += '<tr>';

    for (var key2 in row) {

      if (ddlSelectedVal == "Application") {
        if (i == 1) {
          html += "<td><a href=/Application/Index/" + row['APP_MST_ID'] + " class='menuCall'> " + row["APPLICATIONNAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else if (ddlSelectedVal == "Services") {
        if (i == 1) {
          html += "<td><a href=/PlatformManager/Index/" + row['FOLDER_ID'] + " class='menuCall'> " + row["SERVICENAME"] + "</a></td>";
        } else {
          html += '<td>';
          html += row[key2];
        }
      } else {
        html += '<td>';
        html += row[key2];
      }

      i++;

      html += '</td>';
    }

    i = 0;
    html += '</tr>';
  }
  html += '</table></div>';

  $("#dvTable").html(html).promise().done(function() {
    var index = $("#dvTable table tr th:contains(APP_MST_ID)").index();
    $("#dvTable table tr th").eq(index).hide();
    $("#dvTable table tr td").eq(index).hide();
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="dvTable"></div>