Невозможно применить функции jQuery к сравнительной таблице, сгенерированной JSON - PullRequest
Новая
       11

Невозможно применить функции jQuery к сравнительной таблице, сгенерированной JSON

1 голос
/ 29 марта 2019

Я пытаюсь создать таблицу сравнения на основе выбранных входных данных из выпадающего списка. Данные для заполнения таблицы хранятся в отдельном файле .json.

Хотя таблица строится, как и ожидалось, по какой-то причине она не позволяет мне применять к ней функциональные возможности jQuery. Когда я пытаюсь использовать плагин или код jQuery для пользовательского форматирования таблицы на основе значения ячейки, я не могу этого сделать.

JS Fiddle: https://jsfiddle.net/mithunu/0b64s8ka/9/

Массив JSON: 

var StatJSON = {
  "Samsung": {
    "Parameter1": "<div id=\"rating1\"> 40 </div>",
    "Parameter2": "<div id=\"rating2\"> 50 </div>",
    "Parameter3": "<div id=\"rating3\"> 30 </div>"
  },
  "Mi": {
    "Parameter1": "<div id=\"rating1\"> 40 </div>",
    "Parameter2": "<div id=\"rating2\"> 50 </div>",
    "Parameter3": "<div id=\"rating3\"> 30 </div>"
  },
  "Apple": {
    "Parameter1": "<div id=\"rating1\"> 50 </div>",
    "Parameter2": "<div id=\"rating2\"> 30 </div>",
    "Parameter3": "<div id=\"rating3\"> 40 </div>"
  }  
};

Код jQuery, который я использую, чтобы сгенерировать на основе таблицы выборки, сделанные пользователем: 

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery("#selection").find(':selected').each(function(e) {
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));
});

function PrintTable(data) {
  var html = '<table class="compTable"><tr><td>';
  if (data && data.length) {
    html += '</td>';
    jQuery.each(data, function(k, v) {
      html += '<td id="myHeader" class="header2">' + v + '</td>';
    });
    html += '</tr>';
    jQuery.each(StatJSON[data[0]], function(k, v) {
      html += '<tr><td>' + k + '</td>';
        jQuery.each(data, function(k2, v2) {
        html += '<td>' + StatJSON[data[k2]][k] + '</td>';
      });
      html += '</tr>';
    });
  } else { html += 'No results found</td></tr>'; }
  html += '</table>';
  return html;
}
});

Некоторые из jQuery (пример), предназначенные для таблицы: 

jQuery('#myHeader tr td').each(function($){
  if($(this).text() == 'Samsung')$(this).css("background-color","red");
  if($(this).text() == 'Mi')$(this).css("background-color","blue");
  if($(this).text() == 'Apple')$(this).css("background-color","green");
});

jQuery('#rating1 tr td').each(function($){
  if($(this) = '40')$(this).css("background-color","red");
  if($(this) = '30')$(this).css("background-color","blue");
  if($(this) = '50')$(this).css("background-color","green");
});

Один из плагинов, которые я пытаюсь использовать для форматирования таблицы, это плагин строки рейтинга от github: https://github.com/mre/jquery.ratingbar/

Этот плагин требует, чтобы я кодировал значение в JSON с помощью div: 

<div class="rating">80</div>

Требуется jquery: 

$(document).ready(function() {
        $('.rating').ratingbar();
    });

Но jquery не выполняется, когда я кодирую значение в JSON с помощью div. Как мне это сделать?

1 Ответ

0 голосов
/ 03 апреля 2019

Вам необходимо внести следующие изменения в свой код

1: Правильное использование оператора сравнения.Это должно быть ==, а не =.(Сама скрипка указывает на ошибку).

2: Пользователь jQuery вместо $.(Всегда проверяйте консоль разработчика, чтобы выявить такие проблемы)

3: Запустите свой фрагмент Jquery для элементов, только после добавления элементов в DOM.вы создаете элемент с использованием метода PrintTable, поэтому любую операцию с этими элементами следует выполнять только после этого.

Я взял вашу скрипку и исправил ее для одного примера.

https://jsfiddle.net/v0yq4hft/

jQuery('#btnSubmit').click(function() {
 var data = [];  
 jQuery("#selection").find(':selected').each(function(e) {
   var this_input = jQuery(this);
   if (this_input.is(':selected')) {
     data.push(this_input.val());
   }
 });
 $('#divResult').empty().append(PrintTable(data));


jQuery('#divResult table tr td').each(function($){
  console.log(jQuery(this));
  if(jQuery(this).text() == 'Samsung')jQuery(this).css("background-color","red");
  if(jQuery(this).text() == 'Mi')jQuery(this).css("background-color","blue");
  if(jQuery(this).text() == 'Apple')jQuery(this).css("background-color","green");
});

});
...