javascript - 使用 JQuery 根据行 ID 修改列

Question

我有表，我正在使用数据表，里面有像这样的行:

<tr id="tr.12" data-id="12" role="row" class="odd">
    <td class="sorting_1">Ana O</td>
    <td>ana@mail.com</td>
    <td>2017-02-15 15:54:23</td>
    <td>Active</td>
    <td>User</td>
    <td style="padding-left:3px">
        <a href="#" class="btn-delete" data-toggle="tooltip" title="Delete!">
          <i class="fa fa-trash-o" aria-hidden="true"></i>
       </a>
       <a href="#" class="btn-update" data-toggle="tooltip" title="Edit!">
          <i class="fa fa-pencil" aria-hidden="true"></i>
       </a>
       <a href="#" data-toggle="tooltip" title="View details!">
          <i class="fa fa-eye" aria-hidden="true"></i>
       </a>
  </td>

然后，我尝试通过 ID 获取行，并修改第一列，如下所示:

$("#tr.12 td:nth-child(1)").text("new name");

但是在我尝试删除该行(再次基于 id)之前没有任何变化，但它不起作用。那么，我错过了什么？

Answer 1

您需要转义 ID 中的 .，因为选择器中的 . 表示查找类。

$("#tr\\.12 td:nth-child(1)").text("new name");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr id="tr.12" data-id="12" role="row" class="odd">
    <td class="sorting_1">Ana O</td>
    <td>ana@mail.com</td>
    <td>2017-02-15 15:54:23</td>
    <td>Active</td>
    <td>User</td>
    <td style="padding-left:3px">
      <a href="#" class="btn-delete" data-toggle="tooltip" title="Delete!">
        <i class="fa fa-trash-o" aria-hidden="true"></i>
      </a>
      <a href="#" class="btn-update" data-toggle="tooltip" title="Edit!">
        <i class="fa fa-pencil" aria-hidden="true"></i>
      </a>
      <a href="#" data-toggle="tooltip" title="View details!">
        <i class="fa fa-eye" aria-hidden="true"></i>
      </a>
    </td>
  </tr>
</table>

要么这样，要么不要在 ID 的 CSS 选择器中使用具有特殊含义的字符。