javascript - 使用 jquery 将图标插入表格单元格

Question

我有一个像这样的表格。每当 tr id 与服务器编号匹配时，我需要用图标更新第二个单元格(td)。我已经完成了该部分。请检查代码，但我无法将图标放在 n div 之后的第二列(第二个 td)。下面给出了我的 jquery 代码和表结构。此代码将图标放在第一列中。

var obj = jQuery.parseJSON(data);


            $.map(obj.locked, function (id) {
                $("#grid-table tr#" + id)
                    .find("input[type=checkbox]")
                    .after($("<img src='http://www.placehold.it/20x10/ff0000'>"));
                });


<table>
<tr id='1'>
<td>checckbox here</td>
<td><div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span></div></td>
<td>anothe text</td>
</tr>

<tr id='2'>
<td>checckbox here</td>
<td><div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span></div></td>
<td>anothe text</td>
</tr>

<tr id='3'>
<td>checckbox here</td>
<td><div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span></div></td>
<td>anothe text</td>
</tr>

</table>

Answer 1

使用

$.map(obj.locked, function (id) {
    $("#grid-table tr#" + id)
        .find("input[type=checkbox]")
        .closest('td')
        .next('td').html("<img src='http://www.placehold.it/20x10/ff0000'>");
    });

    $(document).ready(function() {
      $("#grid-table tr#1")
        .find("input[type=checkbox]")
        .closest('td')
        .next('td')
        .html("<img src='http://www.placehold.it/20x10/ff0000'>");
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="grid-table">
  <tr id='1'>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span>
      </div>
    </td>
    <td>anothe text</td>
  </tr>

  <tr id='2'>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span>
      </div>
    </td>
    <td>anothe text</td>
  </tr>

  <tr id='3'>
    <td>
      <input type="checkbox" />
    </td>
    <td>
      <div data-original-title="UnLocked" class="ui-pg-div"><span class="ui-icon ui-icon-unlock"></span>
      </div>
    </td>
    <td>anothe text</td>
  </tr>

</table>