Как отключить конкретную ссылку href с помощью события buttonclick

ProgramBox

Как отключить конкретную ссылку href с помощью события buttonclick

Post author:admin
Запись опубликована:30 апреля, 2023
Post category:Вопросы по программированию

#javascript #html #html-tbody

#javascript #HTML #html-tbody

Вопрос:

У меня есть несколько таблиц, где каждая строка определяется идентификатором и классом. Слова в каждой строке на самом деле являются href links . У меня есть одна кнопка с идентификатором testbuttonba . При щелчке testbuttonba я хочу, чтобы произошло следующее:

1) href чтобы идентификатор table1 был отключен.

2) href чтобы ID table2 и table3 по-прежнему были включены.

Мой приведенный ниже код не работает (все ссылки по-прежнему активируются после нажатия):

HTML

 <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>

JavaScript

 <script>
    /*diasble the first link - not working*/
    function function2() {
        document.getElementById("table1").href = "#";
    }
    return false;
</script>

1. у вас нет закрывающих тегов tbody?

2. getElementById() вернет элемент <tbody> , у которого нет атрибута href. Самый простой способ устранить вашу проблему — установить для значения link href значение nothing, или #

Ответ №1:

Ваш скрипт захватывает неправильный элемент. document.getElementById("table1") возвращает tbody элемент, для которого нет href атрибута.

Вам нужно добавить идентификатор к a элементу, например: <a id="some-id">

Затем используйте его, чтобы захватить ссылку и изменить href: document.getElementById("some-id").href = "#";

Ответ №2:

 please change the function 
  function function2() {

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

результатом этого кода document.getElementById(«table1») является тег tbody, и затем вы должны найти тег a в этом теге, а затем отключить href .
я надеюсь, что мой ответ даст вам представление.

Ответ №3:

Вы должны найти тег привязки в элементе с идентификатором table1 и отключить его, как показано ниже.

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

Ответ №4:

Вы не должны удалять 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

Обновление: Заменены <font/> теги некоторыми CSS. <font/> Элемент устарел. Надеюсь, это поможет,

1. Не сохраняйте устаревшие элементы в коде. Исправьте и сообщите OP об этом.

2. @musa Я обновил свой ответ, чтобы удалить <front/> элемент, поскольку он устарел и может не работать в современных браузерах. developer.mozilla.org/en-US/docs/Web/HTML/Element/font

3. @LGSon, спасибо, что уведомили меня, я совершенно упустил это из виду