javascript - 填写 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>

并且有这样的字符串:我和我的狗)...

我该怎么办，带有jquery库的javascript通过我的字符串进行迭代，并将这个字符串符号附加到我的html表中，这样，第一个字母I转到td，其中td包含1个数字， space 转到第二个，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);
}

这还没有完全起作用，因为 :contains(1) 也匹配 16。我会调查一下。