строка формата в JQuery

Question

Я хочу форматировать строки, отображаемые в таблице, то есть AbcDeF с различным размером шрифта для каждого символа. Каждая строка в другой строке будет иметь другой шаблон, который определяется вектором, переданным со строкой в ​​формате Json, т. Е. ['Abcde', [1,2]] указывает буквы «b» и «c» в строке «abcde», будут отображаться в разных размерах/цветах на конечном дисплее. Это означает, что каждый шаблон строки динамически назначается.

Я изменил исходный код, основанный на ответ tenbits', и все работает хорошо, за исключением всех строк только отформатированных последним векторный формат строки, код с результатами на скрипку,

https://fiddle.jshell.net/wrwhxdd4/7/

Тщательное чтение документ функции .each(), я обнаружил, что проблема в том, что функция setter, т.е. .css(), действует по всему набору согласованных элементов, в этом случае все строки в столбце 1 и отформатированы с шаблоном, обозначенным последним ряд. Я не могу найти решение для работы функции обратного вызова в каждой строке отдельно, используя назначенный конкретный шаблон. Какие-либо предложения?

Answer 1

Вы должны wrapp каждой буквы с некоторой HTML тегом:

var json_data = [['hello', [1,4]], ['Hello', [0,3]], ['HELLO', [2,3]]]; 
 

 
generateTable(json_data); 
 

 
function generateTable(arr){ 
 
    $('#my-table').html('<tr><th>col1</th><th>col2</th><tr>'); 
 
    $.each(arr, function(index, val) { 
 
     var str = val[0]; 
 
     var pattern = val[1]; 
 
     var html = colorizeLetters(str, pattern); 
 
     var $row = $('<tr>'); 
 
     var $cell1 = $('<td class="1">').html(html); 
 
     var $cell2 = $('<td>').html(pattern.join(', ')); 
 

 
     $row.append($cell1).append($cell2).appendTo('#my-table'); 
 
    }); 
 
} 
 

 
function randomColor(){ 
 
    return "#"+((1<<24)*Math.random()|0).toString(16); 
 
} 
 

 
function colorizeLetters(text, indexes) { 
 
    return text.split('').reduce(function(html, letter, i){ 
 
     if (indexes != null && indexes.indexOf(i) === -1) 
 
      return html + letter; 
 

 
     var c = '<font color="' + randomColor() + '">' + letter + "</font>"; 
 
     return html + c; 
 
    }, ""); 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id='my-table'></table>

EDIT: Проблемы в коде here является строкой с $('#display_1 td.1').each - это всегда ссылается на все td. Это означает, что на третьей итерации $.each(json_data она ссылается и на предыдущие 2 строки, так как все они имеют класс .1.