如何实现点击时显示表格行数据并切换箭头图标？

下面是基于你的需求修改后的完整代码，用最基础的JavaScript实现，不需要复杂的知识，直接替换你的原有代码就能用：

<!DOCTYPE html>
<html>
<head>
<title>Breaking News</title>
</head>
<body bgcolor="#EEEEEE" link="0000FF" vlink="0000FF" alink="0000FF">

<table width="400" cellspacing="1" cellpadding="5" align="center" bgcolor="#CCCCCC" align="center">
<tr>
<td align="center" valign="middle" bgcolor="#000000" width="" colspan="7"><span style="color: #FFFFFF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Breaking News</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Date</b></span></td>
<td align="left" valign="middle" width="" bgcolor="#CCCCCC"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><b>Subject</b></span></td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 10:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span id="arrow1" style="color: #000000; cursor: pointer;" onclick="toggleRow(1)">&#9654;</span> <a href="#">Article Name Here</a></span></td>
</tr>
<tr id="content1" style="display:none;">
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">
Content for the 10:00a article<br>
</span>
</td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 9:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span id="arrow2" style="color: #000000; cursor: pointer;" onclick="toggleRow(2)">&#9660;</span> <a href="#">Article Name Here</a></span></td>
</tr>
<tr id="content2">
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">
Content I'd like displayed when the arrow is clicked<br>
</span>
</td>
</tr><tr>
<td align="left" valign="middle" width="" bgcolor="#FFFFFF"><span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">Aug 22, 2023 / 8:00a</span></td>
<td align="left" valign="middle" bgcolor="#FFFFFF" width=""><span style="color: #0000FF; font-family: Arial,Helvetica,sans-serif; font-size: 14px;"><span id="arrow3" style="color: #000000; cursor: pointer;" onclick="toggleRow(3)">&#9654;</span> <a href="#">Article Name Here</a></span></td>
</tr>
<tr id="content3" style="display:none;">
<td align="left" valign="middle" bgcolor="#FFFFFF" width="" colspan="2">
<span style="color: #333333; font-family: Arial,Helvetica,sans-serif; font-size: 14px;">
Content for the 8:00a article<br>
</span>
</td>
</tr>
</table>
<br>

<script>
function toggleRow(num) {
  // 获取对应的箭头元素和内容行元素
  const arrow = document.getElementById(`arrow${num}`);
  const contentRow = document.getElementById(`content${num}`);
  
  // 判断当前内容行是否隐藏
  if (contentRow.style.display === 'none') {
    // 显示内容行，箭头切换为向下
    contentRow.style.display = 'table-row';
    arrow.innerHTML = '&#9660;';
  } else {
    // 隐藏内容行，箭头切换为向右
    contentRow.style.display = 'none';
    arrow.innerHTML = '&#9654;';
  }
}
</script>

</body>
</html>

关键修改点说明： #

• 给每个箭头添加了id（比如arrow1）和onclick点击事件，触发toggleRow(num)函数，num是对应内容行的序号
• 给每个内容行添加了id（比如content1），初始隐藏的行设置style="display:none"
• 在页面末尾添加了简单的JavaScript函数toggleRow，功能是：
  1. 根据序号找到对应的箭头和内容行
  2. 判断内容行当前状态，隐藏就显示，显示就隐藏
  3. 同步切换箭头的方向字符

使用注意： #

• 确保每个箭头的序号和对应内容行的序号一致，比如arrow1对应content1
• 脚本放在页面末尾，确保页面元素加载完成后才能找到对应的DOM元素

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