点击给td或者span中文字下面添加一条带颜色的线

如图，点击时cut方法中为0，就在“文字实录”下添加一条带颜色的线，点击cut为1时“文字实录”下的线消失，”主持人发言“下添加一条带颜色的线。

最好是能在td下面的线，这种要怎么操作，求大佬帮忙

看看我这个例子

<!DOCTYPE html>
<html lang="en">

<head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
            .a {
                  border-bottom: 2px solid red;
            }
            .b {
                  /* border-bottom: 2px solid red; */
            }
      </style>
</head>

<body>
      <table>
            <tr id="trArr">
                  <td onclick="cut(0)">文字实录</td>
                  <td onclick="cut(1)">主持人发言</td>
                  <td onclick="cut(2)">嘉宾发言</td>
                  <td onclick="cut(3)">网友提问</td>
            </tr>
      </table>
</body>
<script>

      var tr = document.getElementById("trArr");
      var trArr = tr.children;
      cut(0)
      function cut(val) {
            for (let i = 0; i < trArr.length; i++) {
                  if (val == i) {
                        trArr[i].className = "a";
                  } else {
                        trArr[i].className = "b"
                  }

            }


      }
</script>

</html>