动态生成表格行时，数据匹配同色否则异色的实现问题

问题原因分析 #

你遇到的问题核心有三点：

1. JavaScript语法错误：代码里的&&是HTML实体转义字符，在JS中会被解析为无效语法，导致条件判断逻辑直接失效，最终只能执行默认的交替着色。
2. 缺失关键CSS样式：你的CSS代码里没有定义zebra-even和zebra-odd类的背景色，就算JS逻辑正确，也看不到颜色区分效果。
3. 执行时机不匹配：如果是前端异步动态生成表格行（而非服务器端模板渲染），$(document).ready()只会在页面初始加载时执行一次，无法覆盖后续新增的行。

修复后的完整代码 #

1. 修正后的JavaScript代码

$(document).ready(function () {
  applyRowColoring();
});

// 封装着色逻辑为独立函数，方便后续动态添加行后调用
function applyRowColoring() {
  var c = 0;
  $("#tblExport tbody tr").each(function () {
      var $item = $("td:first", this);
      var $prev = $(this).prev().find('td:first');

      // 修复语法错误：将&&替换为&&
      if ($prev.length && $prev.text().trim() !== $item.text().trim()) {
          c = 1 - c;
      }
      // 先清除旧类再添加新类，避免样式冲突
      $(this).removeClass('zebra-even zebra-odd').addClass(['zebra-even', 'zebra-odd'][c]);
  });
}

2. 补充完整的CSS代码

#tblExport>tbody {
  font: normal medium/1.4 sans-serif;
}

#tblExport {
  border-collapse: collapse;
  width: 100%;
}

#tblExport th, td {
  padding: 0.25rem;
  text-align: left;
  border: 1px solid #ccc;
}

#tblExport th {
  background: #bfbfbf;
}

/* 新增行分组着色的核心样式 */
#tblExport .zebra-even {
  background-color: #f9f9f9;
}

#tblExport .zebra-odd {
  background-color: #eaeaea;
}

3. 补全HTML结构

你的HTML代码缺少表格的基础结构，需补充<table>和<tbody>标签：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="tblExport">
  <thead>
    <tr>
      <th>产品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    {% for product in products %}
    <tr>
        <td>{{product.name}}</td>
        <td>{{product.price}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

前端动态添加行的适配方案 #

如果是通过AJAX等方式在页面加载后动态新增行，只需在添加完成后调用applyRowColoring()即可：

// 示例：AJAX加载数据后添加行
$.get('/api/products', function(data) {
  var $tbody = $('#tblExport tbody');
  data.forEach(function(product) {
    $tbody.append(`<tr><td>${product.name}</td><td>${product.price}</td></tr>`);
  });
  // 新增行完成后执行着色逻辑
  applyRowColoring();
});

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