Разбор таблицы JSON: скрытие строки, изменение цвета слова.

odevayka

Всем привет, Я использую jquery для преобразования электронной таблицы Google в JSON, которая создает таблицу HTML. Я хотел бы:

скройте одну из строк, в которой есть фраза «E9».
измените цвет фразы «С12» на красный.

Я перепробовал много скриптов, но безрезультатно! Вот код, который у меня сейчас есть.

Большое спасибо!

 


<html>


<head>


<script src="[URL='https://lumtu.com/yti/auAAuanNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMy4xLjx4y']https://code.jquery.com/jquery-3.1.0.js[/URL]"></script>


<script> 


//google spreadsheet






var spData=null;function doData(a){spData=a.feed.entry}function drawCell(b,c,a){var d=$(a?"<th/>":"<td/>");b.append(d);d.append(c);return d}function drawRow(a,e,d){if(e==null){return null}if(e.length==0){return null}var b=$("<tr/>");if(d){b.addClass("head")}a.append(b);for(var f=0;f<e.length;f++){drawCell(b,e[f],((f==0)||d))}return b}function drawTable(a){var b=$("<table/>");a.append(b);return b}function readData(b){var f=spData;var d=drawTable(b);var e=[];var h=0;for(var c=0;c<f.length;c++){var a=f[c]["gs$cell"];var g=a["$t"];if(a.col==1){drawRow(d,e,(h==1));e=[];h++}e.push(g)}drawRow(d,e,(h==1))}$(document).ready(function(){readData($("#data"))});


//Hide Row based on Phrase


$("#data tr:contains('E9')").hide ();


//change color of phrase: C12


$('table').each(function(){


$(this).html(


$(this).html()


.replace(


/(?<!-)(\bC12\b)(?!([^<]+)?>)(?!-)/ig,


'<span style="color:green;">$1</span>'


)


);


});


</script>


</head>


<body>






<script src="[URL='https://lumtu.com/yti/dQYYQdGFodHRwczovL3NwcmVhZHNoZWV0cy5nb29nbGUuY29tL2ZlZWRzL2NlbGxzLzFMTTM1M3ozUThFZVlWQzJMcHh0YThwNFU0UUJQX2loOHZ6RVJBOWRoX0Q0LzEvcHVibGljL3ZhbHVlcz9hbHQ9anNvbi1pbi1zY3JpcHQmY2FsbGJhY2s9ZG9EGZ9']https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=doData[/URL]">


</script>


<div class="box-table" id="spreadsheet" style="overflow-x:auto!important;">


<table id="data"></table>


</div>


</body>


</html>

HTML:

Руслан Салихзянов

по сути, я не хочу редактировать его на стороне сервера, потому что я перенесу эти данные на несколько сайтов, а затем хочу использовать код в одном столбце, чтобы показывать или скрывать только определенные данные на разных страницах....

CrewGer

Я использую плагин jquery от datatables.net, и у них есть процесс, позволяющий вам изменять контент перед его отображением. Я предпочитаю делать это на сервере, но бывают случаи, когда я использовал JavaScript, и он работает нормально. Вы пробовали этот плагин?

balamutov1

сейчас работаю благодаря @m_hutley на форумах Sitepoint

 


<html>


<head>


<script src="[URL='https://lumtu.com/yti/auAAuanNodHRwczovL2NvZGUuanF1ZXJ5LmNvbS9qcXVlcnktMy4xLjx4y']https://code.jquery.com/jquery-3.1.0.js[/URL]"></script>


<script>






var spData=null;function doData(a){spData=a.feed.entry}function drawCell(b,c,a){var d=$(a?"<th/>":"<td/>");b.append(d);d.append(c);return d}function drawRow(a,e,d){if(e==null){return null}if(e.length==0){return null}var b=$("<tr/>");if(d){b.addClass("head")}a.append(b);for(var f=0;f<e.length;f++){drawCell(b,e[f],((f==0)||d))}return b}function drawTable(a){var b=$("<table/>");a.append(b);return b}function readData(b){var f=spData;var d=drawTable(b);var e=[];var h=0;for(var c=0;c<f.length;c++){var a=f[c]["gs$cell"];var g=a["$t"];if(a.col==1){drawRow(d,e,(h==1));e=[];h++}e.push(g)}drawRow(d,e,(h==1))};


function loadAndColor(data) {


doData(data);


readData($("#data"));


//Hide Row based on Phrase


$("#data tr:contains('E9')").hide();


//change color of phrase: B10


$("#data td:contains('B10')").each(function() { $(this).html($(this).html().replace(/\bB10\b/ig,'<span style="color:green;">B10</span>'))});


};


</script>


</head>


<body>


<div class="box-table" id="spreadsheet" style="overflow-x:auto!important;">


<div id="data"></div>






<script src="[URL='https://lumtu.com/yti/bAbbAb3JodHRwczovL3NwcmVhZHNoZWV0cy5nb29nbGUuY29tL2ZlZWRzL2NlbGxzLzFMTTM1M3ozUThFZVlWQzJMcHh0YThwNFU0UUJQX2loOHZ6RVJBOWRoX0Q0LzEvcHVibGljL3ZhbHVlcz9hbHQ9anNvbi1pbi1zY3JpcHQmY2FsbGJhY2s9bG9hZEFuZENvEZu']https://spreadsheets.google.com/feeds/cells/1LM353z3Q8EeYVC2Lpxta8p4U4QBP_ih8vzERA9dh_D4/1/public/values?alt=json-in-script&callback=loadAndColor[/URL]">


</script>


</div>


</body>


</html>

Код (разметка):

GrafDi

Извините, я опоздал на вечеринку... но ЧЕРТ... и люди задаются вопросом, почему я говорю, что 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://lumtu.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, возможно, придется перехватить, чтобы они не имели области действия, а вместо этого все следующие строки указывали на них для заголовков = "", но это становится немного сложнее для чего-то, что - поскольку это полностью создано сценарием - уже говорит доступности, чтобы она пошла к черту.

Похожие темы	Дата
Как долго вы занимаетесь Дизайном	19.10.2024, 18:10
Динамическое изображение	19.10.2024, 18:10
варианты калькулятора объема?	19.10.2024, 18:10
Как исключить категорию из get_the_category?	19.10.2024, 18:10
Проблемы новичков в CSS	19.10.2024, 18:10
ютуб с ценой за конверсию	19.10.2024, 18:10
Какая CMS мне подойдет?	19.10.2024, 18:10
Каков наиболее эффективный способ выбора элемента, специфичного для H1?	19.10.2024, 18:10
Бесплатный чат для вашего сайта или блога с веб-камерами	19.10.2024, 18:10
Как включить смешивание и сопоставление «3 по цене 1» для нескольких категорий продуктов в Woocommerce?	19.10.2024, 18:10

Разбор таблицы JSON: скрытие строки, изменение цвета слова.

odevayka

Руслан Салихзянов

CrewGer

balamutov1

GrafDi

I AM

Интересно