как переключаться между текстом и таблицей? - PullRequest
Новая
       0

как переключаться между текстом и таблицей?

0 голосов
/ 01 ноября 2019

Я понял, как переключаться между текстом, но не могу понять, как переключаться между текстом и таблицей. Что мне нужно сделать, чтобы изменить текст в таблицу, а таблицу - в текст одним нажатием кнопки?

Я попытался вставить html в функцию js 

<!DOCTYPEhtml>

<body>
  <script>
    function home() {
      var x = document.getElementById('myid') const home = "home";
      if (x.innerHTML !== home) {
        x.innerHTML = home
      } else {
        x.innerHTML = home
      }
    }

    function percentages() {
      var x = document.getElementById('myid') const percent = "percent";
      if (x.innerHTML !==
        percent) {
        x.innerHTML = percent;
      } else {
        x.innerHTML = percent;
      }
    }
  </script>
  <div>
    <nav>
      <ul>
        <li>
          <p><button onclick="home()">Home</button></p>
        </li>
        <li>
          <p><button onclick="percentages()">Percentages</button></p>
        </li>
      </ul>
    </nav>
    <div id="myid">home</div>
  </div>
  <table style="width:100%">
    <tr>
      <th>Level</th>
      <th>How many levels</th>
    </tr>
    <tr>
      <td>4+</td>
      <td><input id="4p" type="levels" placeholder="number of levels"></td>

</body>

</html>

1 Ответ

0 голосов
/ 01 ноября 2019 
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $(".show-text").toggleClass("show-table");
  });
});
</script>

<style>
.show-text p{
    display: block
}
.show-text table{
    display: none
}

.show-text.show-table p{
    display: none
}
.show-text.show-table table{
    display: block
}
</style>
</head>
<body>

<div class="show-text">
        <p>any text</p>
        <table>
            <thead>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
                <tr>
                    <td>1</td>
                    <td>2</td>
                    <td>3</td>
                </tr>
            </tbody>
        </table>
    </div>


<button>toggle</button>

</body>
</html>

Js Fiddle Here https://jsfiddle.net/vsdbL614/

...