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'>");
    });

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: