从JQuery JSON数组创建比较表

Question

我有一个带有对象和HTML复选框选择的jQuery代码。目前，它为我提供了每个选定输入的单独表格，但是由于键（行标题）对于所有输入都是相同的，因此我实际上要求每个选择都在单个表格中显示在先前选择的右侧。

因此，我需要构建一个简单的比较表，以比较参数中的每个选项。我该怎么做？

所需结果的图像：

我一直在努力处理这段代码，等待您的输入。

jQuery(document).ready(function($) {
  var StatJSON = {
    "Opt1": {
      "Name": "Mat",
      "Parameter1": "65",
      "Parameter2": "30"
    },
    "Opt2": {
      "Name": "Mik",
      "Parameter1": "62",
      "Parameter2": "40"
    },
    "Opt3": {
      "Name": "Mir",
      "Parameter1": "65",
      "Parameter2": "90"
    }
  };

  $('#btnSubmit').click(function() {
    var resultString = '';
    $('input[type="checkbox"]:checked').each(function() {
      var this_input = $(this);
      if (this_input.is(':checked')) {
        resultString += PrintHtml(StatJSON[$(this).val()]);
      }
    });
    $('#divResult').html(resultString);
  });
});

function PrintHtml(obj) {
  var html = '<div class="opt">';
  if (obj) {
    $.each(obj, function(k, v) {
      html += '<div>' + k + ' : ' + v + '</div>';
    });
  }
  html += '</div>';
  return html;
}

.opt {
  margin: 10px;
  padding: 10px;
  background: #eee;
  border: 1px solid #222;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
Options:
<input type="checkbox" name="Station" value="Opt1">Option1
<input type="checkbox" name="Station" value="Opt2">Option2
<input type="checkbox" name="Station" value="Opt3">Option3
<input id="btnSubmit" type="submit" value="submit" />
<br /><br />
<div id="divResult"></div>

Answer 1

这不是最好的方法，购买它就可以了！

您应该在生成html之前重新构造数据，因为如果数据增长太多，这种方法将无法很好地扩展。

var StatJSON = {
  "Opt1": {
    "Name": "Mat",
    "Parameter1": "65",
    "Parameter2": "30"
  },
  "Opt2": {
    "Name": "Mik",
    "Parameter1": "62",
    "Parameter2": "40"
  },
  "Opt3": {
    "Name": "Mir",
    "Parameter1": "65",
    "Parameter2": "90"
  }
};

$('#btnSubmit').click(function() {
  var data = [];
  $('input[type="checkbox"]:checked').each(function() {
    var this_input = $(this);
    if (this_input.is(':checked')) {
      data.push(this_input.val());
    }
  });
  $('#divResult').empty().append(PrintTable(data));
});

function parseData (data) {
  var parsed = {};
  var firstItem = StatJSON[data[0]];
  for (var param in firstItem) {
    parsed[param] = [];
    $.each(data, function(opt) {
      var chosenOpt = data[opt];
      var value = StatJSON[chosenOpt][param];
      parsed[param].push(value);
    });
  };
  return parsed;
}

function cell (str) {
  return '<td>'+str+'</td>';
}

function PrintTable(data) {
  var html = '';
  if (data && data.length) {
    html += '<table class="opt">';
    // 1st row
    html += '<tr>';
    // 1st empty cell
    html += cell('');
    $.each(data, function(index, opt) {
      // each chosen opt
      html += cell(opt);
    });
    html += '</tr>';
    // other rows
    var parsed = parseData(data);
    $.each(parsed, function(param) {
      html += '<tr>';
      // 1st cell
      html += cell(param);
      $.each(parsed[param], function(opt, value) {
        // each param value
        html += cell(value);
      });
      html += '</tr>';
    });
    html += '</table>';
  } else { 
    html = 'No results found'; 
  }
  return html;
}

.opt {
  margin: 10px;
  background: #eee;
  border: 1px solid #222;
}
.opt td {
  border: 1px solid #bbb;
  padding: 10px;
}

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<div>
Options:
<input type="checkbox" name="Station" value="Opt1">Option1
<input type="checkbox" name="Station" value="Opt2">Option2
<input type="checkbox" name="Station" value="Opt3">Option3
<input id="btnSubmit" type="submit" value="submit" />
</div>
<div id="divResult"></div>