点击Approve按钮后，如何更改选中复选框对应tr内的Td值？

<table>
  <tr>
    <td>Value 1</td>
    <td><input type="checkbox" id="checkbox1"></td>
    <td><button class="approve-btn">Approve</button></td>
  </tr>
  <tr>
    <td>Value 2</td>
    <td><input type="checkbox" id="checkbox2"></td>
    <td><button class="approve-btn">Approve</button></td>
  </tr>
</table>

<script>
  // 获取所有的Approve按钮
  var approveButtons = document.getElementsByClassName('approve-btn');

  // 给每个Approve按钮添加点击事件的监听器
  for (var i = 0; i < approveButtons.length; i++) {
    approveButtons[i].addEventListener('click', function() {
      // 获取到被点击的Approve按钮所在的tr元素
      var tr = this.parentNode.parentNode;
      
      // 查找到对应的复选框元素
      var checkbox = tr.querySelector('input[type="checkbox"]');
      
      // 判断复选框是否被选中
      if (checkbox.checked) {
        // 获取到对应的Td元素
        var td = tr.querySelector('td:nth-child(1)');
        
        // 修改Td元素的值
        td.innerHTML = 'New Value';
      }
    });
  }
</script>