自定义Bootstrap表格轮播仅显示第1、3项，第2、4项缺失求助

嘿，我仔细看了你的代码和问题描述，首先发现你提供的轮播项HTML里有个明显的DOM结构错误——这很可能就是导致轮播异常的罪魁祸首！

1. 先修复DOM标签错误 #

在第一个表格的第一行里，<td>20</td>后面多了一个多余的</td>标签：

<tr>
  <td># of Project<br>Completed</td>
  <td>20</td>
  </td> <!-- 这里是多余的闭合标签！ -->
  <td>17</td>
  <td>15</td>
  <td>52</td>
</tr>

这个错误会让浏览器解析DOM时出现混乱，不仅会破坏当前表格的结构，还会影响后续轮播项的渲染和JS对元素的选取。把这个多余的</td>删掉，就能解决大部分问题。

2. 确保所有轮播项结构一致 #

你说实际有4个轮播项，要保证另外3个的结构和修正后的第一个完全一致，没有其他标签闭合错误、嵌套错误。比如每个mySlides容器都应该是独立的div，内部的Bootstrap面板、表格都要完整闭合。

3. 验证JS元素选取是否正常 #

修复DOM后，打开浏览器控制台（按F12），查看console.log("len "+x.length)的输出：

• 如果输出是4，说明所有轮播项都被正确获取了，此时再测试轮播应该能正常切换所有项；
• 如果输出不是4，说明还有其他DOM结构问题，需要逐一检查剩余3个轮播项的代码。

4. 避免样式冲突（可选优化） #

如果修复后还是有问题，可能是Bootstrap的内置样式和你直接修改style.display的方式冲突了。可以改用类控制显示隐藏，更稳定：
首先添加CSS：

.mySlides {
  display: none !important;
}
.mySlides.active {
  display: block !important;
}

然后修改JS代码，用类操作替代行内样式修改：

var slideIndex = 1;
showDivs(slideIndex);

function plusDivs(n) {
  showDivs(slideIndex += n);
}

function showDivs(n) {
  var i;
  var x = document.getElementsByClassName("mySlides");
  console.log("len "+x.length);
  
  if (n > x.length) { slideIndex = 1; }
  if (n < 1) { slideIndex = x.length; }
  
  // 移除所有轮播项的active类
  for (i = 0; i < x.length; i++) {
    x[i].classList.remove("active");
  }
  // 给当前轮播项添加active类
  x[slideIndex-1].classList.add("active");
}

这种方式比直接操作行内样式更不容易和Bootstrap的样式冲突。

5. 排除jQuery干扰（可选） #

虽然你说jQuery用于其他功能，但可以暂时注释掉jQuery的引入，测试轮播是否正常，排除jQuery对DOM元素的意外修改导致的问题。

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