Показать Скрыть таблицу с помощью флажка

Question

Показать Скрыть таблицу с помощью флажка

Копирование в Eclipse и вставка его в Word также является еще одним вариантом.

2

javascript

задан michaelitoh 5 March 2019 в 13:57

3 ответа

Другие вопросы по тегам:

javascript

Похожие вопросы:

score 0 · Answer 1

Пожалуйста, обратитесь к ссылке для обновленного

function streamverify(x){
   document.getElementById('upstream_tab').style.display='none';
   document.getElementById('downstream_tab').style.display='none';
   if(x == 0)
     document.getElementById('upstream_tab').style.display='block';
   else if (x == 1)
     document.getElementById('downstream_tab').style.display='block';
   return;
}

score 0 · Answer 2

Я предлагаю использовать также функцию onchange вместо функции onclick

<input type="radio" name="rad1" value="0" onchange="streamverify(this);">Cookies
<input type="radio" name="rad1" value="1" onchange="streamverify(this);">Candies

и для изменения Javascript

function streamverify(x) {
  if (x.value == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else if (x.value == 1) {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  } else {
    document.getElementById('upstream_tab').style.display = 'none';
    document.getElementById('downstream_tab').style.display = 'none';
  }
}

score 0 · Answer 3

Просто исправьте условие if if else следующим образом:

function streamverify(x) {
  if (x == 0) {
    document.getElementById('upstream_tab').style.display = 'block';
    document.getElementById('downstream_tab').style.display = 'none';
  } else {
    document.getElementById('downstream_tab').style.display = 'block';
    document.getElementById('upstream_tab').style.display = 'none';
  }
  return;
}

.tg {
  border-collapse: collapse;
  border-spacing: 0;
}

.tg td {
  font-family: Arial, sans-serif;
  font-size: 14px;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg th {
  font-family: Arial, sans-serif;
  font-size: 14px;
  font-weight: normal;
  padding: 10px 5px;
  border-style: solid;
  border-width: 1px;
  overflow: hidden;
  word-break: normal;
  border-color: black;
}

.tg .tg-s268 {
  text-align: left
}

<input type="radio" name="rad1" onclick="streamverify(0)">Cookies
<input type="radio" name="rad1" onclick="streamverify(1)">Candies

<div id="upstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Cookies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>



<br>
<div id="downstream_tab">
  <table class="tg">
    <tr>
      <th class="tg-s268">Candies</th>
    </tr>
    <tr>
      <td class="tg-s268"></td>
    </tr>
  </table>
</div>