Изменить стиль конкретной ячейки таблицы отображённой на вебсайте через google visual

[njuha]

Здравствуйте.


Код для вывода таблицы:

google.load('visualization', '1', {
    packages: ['table']
});
var visualization;
 
function drawVisualization() {
    var query = new google.visualization.Query('https://spreadsheets.google.com/tq?key=1xXCb2Xtp_Lsak3HLF7mV7IzcuaiMnBKPA6x2HUxCKrM&output=html&range=B4:Q30&headers=1&gid=451291128&&usp=sharing');
    query.setQuery('SELECT B, C, D, E, F, G, H, I, J,K,L,M,N,O,P,Q');
    query.send(handleQueryResponse);
}
 
function handleQueryResponse(response) {
    if (response.isError()) {
        alert('There was a problem with your query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
        return;
    }
    var data = response.getDataTable();
    visualization = new google.visualization.Table(document.getElementById('table'));
    visualization.draw(data, {
        allowHtml: true,
        legend: 'bottom'
    });
}
 
google.setOnLoadCallback(drawVisualization);

Моя задача - изменить цвет всех букв B в таблице.

Я пробовал использовать javascript innerhtml и заменить все B на <span>B</span>, но ничего не получается, поскольку google visualization загружается после всех остальных Javascript кодов на странице.

Вероятно, нужно произвести замену B на <span>B</span> в запросе google visualization, но моих знаний языка не хватает, чтобы это провернуть.

Прошу о помощи.

[Malleys]

njuha, labvakar! Вы можете перед отрисовкой таблицы перебрать все нужные ячейки и заменить B на <span>B</span>. Я так понимаю, что в том столбике, где нет заголовка (столбик с именами), такую замену производить не надо.

<table id="table"></table>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<script>
	google.load("visualization", "1", {
		packages: ["table"]
	});
	var visualization;

	function drawVisualization() {
		var query = new google.visualization.Query(
			"https://spreadsheets.google.com/tq?key=1xXCb2Xtp_Lsak3HLF7mV7IzcuaiMnBKPA6x2HUxCKrM&output=html&range=B4:Q30&headers=1&gid=451291128&&usp=sharing"
			);
		query.setQuery("SELECT B, C, D, E, F, G, H, I, J,K,L,M,N,O,P,Q");
		query.send(handleQueryResponse);
	}

	function handleQueryResponse(response) {
		if (response.isError()) {
			alert(
				"There was a problem with your query: " +
				response.getMessage() + " " +
				response.getDetailedMessage()
			);
			return;
		}
		var data = response.getDataTable();
		visualization = new google.visualization.Table(document.getElementById("table"));

		for (var x = 0, lenX = data.getNumberOfColumns(); x < lenX; x++) {
			if(data.getColumnLabel(x) == "" || x === 0) continue;

			for (var y = 0, lenY = data.getNumberOfRows(); y < lenY; y++) {
				var value = data.getValue(y, x);
				if(value == null) continue;

				data.setValue(y, x, value.replace(/B/g, '<span class="highlighted">$&</span>'));
			}
		}

		visualization.draw(data, {
			allowHtml: true,
			legend: "bottom"
		});
	}

	google.setOnLoadCallback(drawVisualization);
</script>
<style>
	
.highlighted {
	background-color: yellow;
	font-weight: bold;
}

</style>

[njuha]

Malleys, Спасибо вам огромное!