javascript - 如何迭代具有特定 img alt 属性的表格行并删除 javascript 中的单元格

Question

有一个 html 表格，如下所示(行数各不相同)..

 <table id="issuetable">
     <tbody>
       <tr id="issuerow13210" rel="13210" data-issuekey="Ticket-215" class="issuerow focused">
        <td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215" tabindex="-1" title="Ticket-215"></a>     <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="IT Help" title="IT Help - For general IT problems and questions."></a></td>
        <td class="issuekey">
          <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215">Ticket-215</a>
        </td>
        <a class="issue-link" data-issue-key="Ticket-215" href="/browse/Ticket-215"></a>
    <td class="issue_actions">    <div class="action-dropdown aui-dd-parent">
      <a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13210" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13210/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
       <span>
         <em>Actions</em>
       </span>
     </a>
   </div>
 </td>
    </tr>

    <tr id="issuerow13209" rel="13209" data-issuekey="Ticket-214" class="issuerow">
<td class="issuetype"><a class="hidden-link issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214" tabindex="-1" title="Ticket-214"></a>     <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214"> <img src="/servicedesk/issue-type-icons?icon=it-help" height="16" width="16" border="0" align="absmiddle" alt="Task" title="Task"></a></td>
<td class="issuekey">
  <a class="issue-link" data-issue-key="Ticket-214" href="/browse/Ticket-214">Ticket-214</a>
</td>
<td class="issue_actions">    <div class="action-dropdown aui-dd-parent">
  <a class="aui-dropdown-trigger aui-dd-link icon-tools-small issue-actions-trigger trigger-happy" id="actions_13209" title="Actions (Type . to access issue actions)" href="/rest/api/1.0/issues/13209/ActionsAndOperations?atl_token=B3EQ-V14Z-C9T2-CSQ1|a8670a0d83de2caedc2f08b4935ffa3acc8d8488|lin">
    <span>
      <em>Actions</em>
    </span>
  </a>
 </div>
 </td>
</tr>

</tbody>
     </table>

页面加载完成后，如何使用 JavaScript 来迭代每一行，并仅当该行包含带有 alt="IT Help"的图像时才删除单元格“issue_actions”？

Answer 1

我自己的建议是:

$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();

使用.empty()删除 <td> 的内容元素，但不删除 <td>本身，这应该可以防止表格布局被具有不同单元格计数的行扭曲。

$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();

img[alt="IT Help"] {
  box-shadow: 0 0 0 5px #f00;
}

td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <img src="http://placekitten.com/150/150/" alt="IT Help" />
      </td>
      <td class="issue_actions">This shouldn't be visible</td>
    </tr>
    <tr>
      <td>
        <img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
      </td>
      <td class="issue_actions">This should be visible</td>
    </tr>
    <tr>
      <td>
        <img src="http://placekitten.com/150/150/" alt="IT Help" />
      </td>
      <td class="issue_actions">This shouldn't be visible</td>
    </tr>
  </tbody>
</table>

以下使用remove() ，这说明了轻微的视觉问题:

$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();

img[alt="IT Help"] {
  box-shadow: 0 0 0 5px #f00;
}

td {
  border: 1px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tbody>
    <tr>
      <td>
        <img src="http://placekitten.com/150/150/" alt="IT Help" />
      </td>
      <td class="issue_actions">This shouldn't be visible</td>
    </tr>
    <tr>
      <td>
        <img src="http://lorempixel.com/150/150/people" alt="Not IT Help" />
      </td>
      <td class="issue_actions">This should be visible</td>
    </tr>
    <tr>
      <td>
        <img src="http://placekitten.com/150/150/" alt="IT Help" />
      </td>
      <td class="issue_actions">This shouldn't be visible</td>
    </tr>
  </tbody>
</table>

引用文献:

• Attribute-equals ( [attribute="value"] ) selector .
• closest() .
• empty() .
• siblings() .