如何用jQuery实现表格图标切换：当前行变减号，其余恢复加号

首先先修正你HTML里的两个关键问题，不然功能会出异常：

• ID重复：页面里的ID必须唯一，你重复使用的icon_1和maincounter_1要改成icon_1到icon_5、maincounter_1到maincounter_5这类唯一值。
• 标签嵌套错误：每个<tr>必须包裹对应的<td>，你当前代码里的标签闭合顺序混乱，会导致DOM结构异常。

修正后的HTML代码 #

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<table id="data">
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_1" data-maincounter="1" data-container="body" data-placement="top" onclick="collapsed(this,1)"><i id="icon_1" class="fa fa-plus"></i></span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_2" data-maincounter="2" data-container="body" data-placement="top" onclick="collapsed(this,2)"><i id="icon_2" class="fa fa-plus"></i></span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_3" data-maincounter="3" data-container="body" data-placement="top" onclick="collapsed(this,3)"><i id="icon_3" class="fa fa-plus"></i></span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_4" data-maincounter="4" data-container="body" data-placement="top" onclick="collapsed(this,4)"><i id="icon_4" class="fa fa-plus"></i></span>
    </td>
  </tr>
  <tr>
    <td>
      <span class="btn tooltips btn-green" id="maincounter_5" data-maincounter="5" data-container="body" data-placement="top" onclick="collapsed(this,5)"><i id="icon_5" class="fa fa-plus"></i></span>
    </td>
  </tr>
</table>

实现需求的JavaScript代码 #

基础版（点击后当前行固定为minus，其他行重置为plus）

$(document).ready(function() {
  // 页面初始状态无需额外操作，默认都是fa-plus
});

var collapsed = function(e, counter) {
  // 1. 把所有行的图标统一恢复为fa-plus
  $('#data .fa').removeClass('fa-minus').addClass('fa-plus');
  
  // 2. 将当前点击按钮内的图标切换为fa-minus
  $(e).find('.fa').removeClass('fa-plus').addClass('fa-minus');
};

进阶版（支持同一按钮点击切换：plus↔minus，其他行始终为plus）

$(document).ready(function() {
  // 页面初始状态无需额外操作
});

var collapsed = function(e, counter) {
  var currentIcon = $(e).find('.fa');
  var isCurrentPlus = currentIcon.hasClass('fa-plus');
  
  // 先全局重置所有图标为fa-plus
  $('#data .fa').removeClass('fa-minus').addClass('fa-plus');
  
  // 如果当前图标是plus，就切换为minus；如果已经是minus，保持plus（因为上面已经全局重置）
  if (isCurrentPlus) {
    currentIcon.removeClass('fa-plus').addClass('fa-minus');
  }
};

核心逻辑说明 #

1. 先全局重置所有图标状态，确保除了当前点击行，其他行都回到默认的fa-plus
2. 单独处理当前点击行的图标，根据需求切换为fa-minus或支持双向切换

内容的提问来源于stack exchange，提问作者Jefferson