如何使用特定的img alt属性迭代表行并在javascript中删除单元格

时间:2014-10-08 12:33:12

标签: javascript jquery html

有一个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>

如果页面完成加载以迭代每一行并且只有当行包含alt =“IT帮助”的图像时才删除单元格“issue_actions”,我该如何使用javascript?

2 个答案:

答案 0 :(得分:1)

使用伪选择器:has,然后找到要删除的元素:

 $('tr:has(img[alt="IT Help"]) .issue_actions').remove();

答案 1 :(得分:1)

我自己的建议是:

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

使用.empty()会删除<td>元素的内容,但不会删除<td>本身,这样可以防止表格布局因具有不同细胞数的行而失真

&#13;
&#13;
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').empty();
&#13;
img[alt="IT Help"] {
  box-shadow: 0 0 0 5px #f00;
}

td {
  border: 1px solid #000;
}
&#13;
<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>
&#13;
&#13;
&#13;

以下使用remove(),它演示了轻微的视觉问题:

&#13;
&#13;
$('img[alt="IT Help"]').closest('td').siblings('.issue_actions').remove();
&#13;
img[alt="IT Help"] {
  box-shadow: 0 0 0 5px #f00;
}

td {
  border: 1px solid #000;
}
&#13;
<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>
&#13;
&#13;
&#13;

参考文献: