Question

我有多个表，每行由一个ID和一个类定义。每行中的单词实际上是D。我有一个ID为href links的按钮。如果单击testbuttonba，我希望发生以下情况：

1）testbuttonba的ID href被禁用。

2）table1的ID href和table2仍被启用。

下面的我的代码不起作用（单击后仍启用所有链接）：

HTML

table3

JavaScript

<body>
<button class="btnba" id="testbtnba" onclick="function2()">BA</button>

    /* 1st Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table1">
            <tr>
                <td><a href="showdoc.html"><font size="1"><strong>A. Organisational Content</strong></font></a></td>
           </tr>
    </table>

    /* 2nd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table2">
            <tr>
                <td><a href="showpdf.html"><font size="1"><strong>B. Basic Requirements</strong></font></a></td>
           </tr>
    </table>

    /* 3rd Table */
    <table>
        <tr>
            <th><font size="1">Capability Group</font></th>
        </tr>

        <tbody id="table3">
            <tr>
                <td><a href="showexcel.html"><font size="1"><strong>C. Rules and Regulations</strong></font></a></td>
           </tr>
    </table>

Answer 1

您不应删除href上的<a/>（至少不要以某种方式存储）。您可以创建一个切换按钮，该切换按钮将确定单击按钮时是否调用Event.preventDefault()。

这可以解决问题：

let linkActive = false;
disableToggle = () => {
  linkActive = !linkActive;
}

document.querySelector('#table1 tr td a').onclick = ev => {
  if (linkActive) {
    ev.preventDefault('sd');
  }
};

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

它在上面的代码段中不起作用的原因仅是因为您的选择器没有选择<a/>元素，这样做将纠正这一问题：

function function2() {
  document.querySelector("#table1 tr td a").setAttribute('href', '#');
}

.smallFont {
  font-size: 10px;
}

<button class="btnba" id="testbtnba" onclick="disableToggle()">BA</button>
<br/> /* 1st Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table1">
    <tr>
      <td>
        <a href="showdoc.html">
          <span class="smallFont"><strong>A. Organisational Content</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 2nd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table2">
    <tr>
      <td>
        <a href="showpdf.html">
          <span class="smallFont"><strong>B. Basic Requirements</strong></span>
        </a>
      </td>
    </tr>
</table>

/* 3rd Table */
<table>
  <tr>
    <th>
      <span class="smallFont">Capability Group</span>
    </th>
  </tr>

  <tbody id="table3">
    <tr>
      <td>
        <a href="showexcel.html">
          <span class="smallFont"><strong>C. Rules and Regulations</strong></span>
        </a>
      </td>
    </tr>
</table>

请记住，无法使用以下方式通过代码重新启用链接：o

更新：用一些CSS替换了<font/>标签。 <font/>元素是obsolete。希望有帮助，

Answer 2

您的脚本捕获了错误的元素。 document.getElementById("table1")返回一个tbody元素，该元素上没有href属性。

您需要向a元素添加ID，例如：<a id="some-id">

然后，使用它来获取链接并更改href：document.getElementById("some-id").href = "#";

Answer 3

您必须在ID为table1的元素中找到锚标记，然后按如下所示禁用它。

function function2() {
    var a = document.querySelector('#table1 a');
    a.setAttribute('href','#');
}

Answer 4

please change the function 
  function function2() {

            document.getElementById("table1").getElementsByTagName('a')[0].href = "#";
        }

此代码文档的结果。getElementById（“ table1”）是tbody标记，然后您应该在此标记中找到标记a，然后禁用href。我希望我的回答能给您一个想法。

如何通过buttonclick事件禁用特定的href链接

4 个答案: