Заливка HTML таблица

Question

Допустим у меня есть такой HTML таблицы:

<table> 
    <tr> 
     <td>16</td> 
     <td>3</td> 
     <td>2</td> 
     <td>13</td> 
    </tr> 
    <tr> 
     <td>5</td> 
     <td>10</td> 
     <td>11</td> 
     <td>8</td> 
    </tr> 
    <tr> 
     <td>9</td> 
     <td>6</td> 
     <td>7</td> 
     <td>12</td> 
    </tr> 
    <tr> 
     <td>4</td> 
     <td>15</td> 
     <td>14</td> 
     <td>1</td> 
    </tr> 
</table> 

и имеют такую ​​строку: I and my dog)...

как я могу сделать, что яваскрипта с библиотекой JQuery перебирает через мою строку, и добавить эту строку символы в мою таблицу html, так что первая буква I переходит в td, где td содержит 1 номер, пробел переходит ко второму, a переходит к td с 3 и т. д., я новичок в js, но должен сделать это, как я могу это сделать это?

Как выполнить итерацию по строке и добавить письмо к td с равным числом?

Answer 1

Во-первых, перебирать каждый символ строки:

for (var i=0, len=str.length; i<len; i++) { 
    var char = str.charAt(i); 

Затем найдите td с соответствующим номером:

$("td:contains(" + (i+1) + ")", $table).text(char); 

Где $table ваша таблица, например var $table = $("table") вне цикла.

Полный код:

→ Working jsFiddle

var $table = $("table"); 
var str = "I and my dog"; 

for (var i=0, len=str.length; i<len; i++) { 
    var char = str.charAt(i); 
    $("td", $table).filter(function() { 
    return $(this).text() == (i+1); 
    }).text(char); 
} 

Это полностью не работает, потому что: содержит (1) также соответствует 16. Я буду исследовать.

Answer 2

Попробуйте это:

var data = "I and my dog)..." 

$("td").each(function(index){ 
    $(this).text(data[index]) 
}); 

Answer 3

Я собираюсь перейти на чистый javascript here.

var str = 'I and my dog)..', // test string 
    // get list of td elements 
    td = document.getElementsByTagName('td'), 
    i = 0, 
    l = td.length; 

// iterate thru each <td> element 
for (; i < l; i++) { 
    // save the number in the current <td> 
    var num = parseFloat(td[i].innerText); 
    // fill the current <td> with the matching string index; 
    td[i].innerHTML = num + (str[--num] || ''); 
// (str[--num] || '') this will catch undefined string index 
}