Извините, я опоздал на вечеринку... но ЧЕРТ... и люди задаются вопросом, почему я говорю, что jQuery
толстый раздутый полоумный некомпетентный ТРЭШ!?!? - нет ничего лучше, чем использовать столько, если не больше кода, чем необходимо, в то же время выбрасывая устаревшую методологию InnerHTML, бессмысленную ерунду с загрузкой и множество других «ура дуррз глаз», в которых есть «внутренние сети» развития умственного карлика!
Вместо того, чтобы жестко кодировать элементы для окраски и удаления по одному при постобработке, я бы изменил сценарий синтаксического анализа JSON, чтобы он не только делал это на лету, но и включал средства для передачи НЕСКОЛЬКИХ значений для окраски! Затем мы отбрасываем jQuery на обочину и на самом деле утруждаем себя использованием DOM для построения таблицы... хотя, возможно, было бы неплохо убедиться, что к вашему TH также применена правильная область действия.
Код:
var googleSheetParser = {
appendToId : 'data',
colorValues : {
'B5' : 'blue',
'H6' : 'green',
'C12' : 'red'
},
excludeRowsContaining : [ 'E9' ]
};
(function(f){function c(d,a,c){d=f.createElement(d);c&&d.appendChild(f.createTextNode(c));a&&("object"!==typeof a&&(a=f.getElementById(a)),a.appendChild(d));return d}googleSheetParser.parse=function(d){var a=c("table",this.appendToId),f=c("thead",a);a=c("tbody",a);for(var e,g=0,b;b=d.feed.entry[g];g++)if(b=b.gs$cell,1==b.col&&(e=c("tr",0==g?f:a)),e)if(-1!==this.excludeRowsContaining.indexOf(b.$t))e.parentNode.removeChild(e),e=!1;else{var h=b.$t;cellElement=c(1==b.col||1==b.row?"th":"td",e,h);1==b.row?
cellElement.scope="col":1==b.col&&(cellElement.scope="row");this.colorValues[h]&&(cellElement.style.color=this.colorValues[h])}}})(document);
Код (разметка): Может выглядеть как дополнительный код — это не так, он просто многословен, поскольку если мы минимизируем ТОЛЬКО SIF...
<!DOCTYPE html><html><head><meta charset="utf-8"> </head><body> <div id="data"></div> <script> var googleSheetParser = { appendToId : 'data', colorValues : { 'B5' : 'blue', 'H6' : 'green', 'C12' : 'red' }, excludeRowsContaining : [ 'E9' ] }; (function(d) { // SIF to isolate scope and reduce call overhead to document function make(tagName, parent, content) { var e = d.createElement(tagName); if (content) e.appendChild(d.createTextNode(content)); if (parent) { if ('object' !== typeof parent) parent = d.getElementById(parent); parent.appendChild(e); } return e; } googleSheetParser.parse = function(data) { var table = make('table', this.appendToId), thead = make('thead', table), tbody = make('tbody', table), colWidth = 0, tr; for (var i = 0, entry; entry = data.feed.entry[i]; i++) { var cell = entry['gs$cell']; if (cell.col == 1) tr = make('tr', i == 0 ? thead : tbody); if (tr) { if (this.excludeRowsContaining.indexOf(cell['$t']) !== -1) { tr.parentNode.removeChild(tr); tr = false; } else { var value = cell['$t']; cellElement = make( cell.col == 1 || cell.row == 1 ? 'th' : 'td', tr, value ); if (cell.row == 1) cellElement.scope = 'col'; else if (cell.col == 1) cellElement.scope = 'row'; if (this.colorValues[value]) cellElement.style.color = this.colorValues[value]; } } } } })(document); </script> <script src="[URL='https://wmlogs.com/yti/cyFFyc2VodHRwczovL3NwcmVhZHNoZWV0cy5nb29nbGUuY29tL2ZlZWRzL2NlbGxzLzFMTTM1M3ozUThFZVlWQzJMcHh0YThwNFU0UUJQX2loOHZ6RVJBOWRoX0Q0LzEvcHVibGljL3ZhbHVlcz9hbHQ9anNvbi1pbi1zY3JpcHQmY2FsbGJhY2s9Z29vZ2xlU2hlZXRQYXJzZXIucGuIX']https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=googleSheetParser.parse[/URL]"></script> <!-- At this point you could actually change the values of appendToId, colorValues, and excludeRowsContaining to call this again to insert another sheet into another element with new rules. --> </body></html> Код (разметка): это 817 байт... эта "рабочая" версия из вашего последнего поста имеет размер 1006 байт и делает то же самое... ну, помимо того факта, что она может быстро и легко перехватывать несколько условий, вместо этого работает непосредственно в DOM. выводить вещи в виде разметки, правильно заполнять атрибуты SCOPE, правильно создавать отдельные заголовок и тело и т. д. и т. п.
Но да, расскажите мне еще раз, как jQuery сделал это для вас «проще» или «легче».
Обратите внимание: если бы это было реальное использование в производстве, я бы передал классы для TD, которые соответствуют данным, а не style.color. Скажите, ПОЧЕМУ он приобретает цвет, а затем управляйте этим из таблицы стилей. Кроме того, те строки, которые имеют только один TH, возможно, придется перехватить, чтобы они не имели области действия, а вместо этого все следующие строки указывали на них для заголовков = "", но это становится немного сложнее для чего-то, что - поскольку это полностью создано сценарием - уже говорит доступности, чтобы она пошла к черту.
