Question

<html>
<head>
  <title>eLab</title>
    <script type="text/javascript">
    function change() 
    {
      document.getElementById('myTable').style.height= "400";
      document.getElementById('myTable').style.width= "1000";
      return true;
    }
    </script>
</head>

<body>    
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
    <tbody>
        <tr>
            <th>This is the head!</th>
            <th>I'm the head too!</th>
        </tr>
        <tr>
            <td align=center>Part 1</td>
            <td align=center>Part 2</td>
        </tr>
        <tr>
            <td align=center>Part 3</td>
            <td align=center>Part 4</td>
        </tr>
        <tr>
      <td colspan="2" align=center> Part 5</td>
    </tr>
    </tbody>
</table>

<center>
  <input type="button" onclick="change()" value="Change It">
</center>

</body>
</html>

这是我的HTML代码。

单击按钮后，表格将更改高度和宽度。

我想这样做：在更改尺寸后，如果用户再次点击该按钮，表格将更改回原始尺寸，或者可能会再次将尺寸更改为原始尺寸。

谢谢！

Answer 1

如果您接受css，则可以使用切换来切换某个类来实现此目的。

从css length开始，1000不是有效的css值，您应该使用'1000px'之类的内容，否则width/height将不起作用

#myTable.changed {
  width: 500px;
  height: 300px;
}

<html>
<head>
  <title>eLab</title>
    <script type="text/javascript">
    function change() 
    {
      document.getElementById('myTable').classList.toggle('changed');
      return true;
    }
    </script>
</head>

<body>    
 <!-- Note that the style you give here would not have an effect, as `height:1000` or `width:400` are not valid css length -->
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
    <tbody>
        <tr>
            <th>This is the head!</th>
            <th>I'm the head too!</th>
        </tr>
        <tr>
            <td align=center>Part 1</td>
            <td align=center>Part 2</td>
        </tr>
        <tr>
            <td align=center>Part 3</td>
            <td align=center>Part 4</td>
        </tr>
        <tr>
      <td colspan="2" align=center> Part 5</td>
    </tr>
    </tbody>
</table>

<center>
  <input type="button" onclick="change()" value="Change It">
</center>

</body>
</html>

如果css没有问题，那么你可以使用一个标志来决定该函数的行为，jsfiddle

    <script type="text/javascript">
    var changeFlag = false;
    function change() {
      var table = document.getElementById('myTable');
      changeFlag = !changeFlag;
      var width, height;
      if (changeFlag) {  // Click in odd, then change to new w/h
          width = '500px';
          height = '600px';
      } else {   // Click in even, change to origin size.
          width = '400px';
          height = '1000px';
      }
      table.style.width = width;
      table.style.height = height;
      return true;
    }
    </script>

Answer 2

＆＃13;

{{1}}

＆＃13;

我更改了更改功能以满足您的目的。让我们检查一下这段代码

Answer 3

试试这个：

<html>
<head>
  <title>eLab</title>
    <script type="text/javascript">
    var isToggled = false;
    function toggleSize() 
    {
      if(!isToggled)
      {
        document.getElementById('myTable').style.height= "400";
        document.getElementById('myTable').style.width= "1000";
        isToggled = true;
      }
      else
      {
        document.getElementById('myTable').style.height= "900";
        document.getElementById('myTable').style.width= "400";
        isToggled = false;
      }
      return true;
    }
    </script>
</head>

<body>    
<table border="1" cellpadding="1" cellspacing="1" style="height:1000;width:400;" id="myTable" align=center>
    <tbody>
        <tr>
            <th>This is the head!</th>
            <th>I'm the head too!</th>
        </tr>
        <tr>
            <td align=center>Part 1</td>
            <td align=center>Part 2</td>
        </tr>
        <tr>
            <td align=center>Part 3</td>
            <td align=center>Part 4</td>
        </tr>
        <tr>
      <td colspan="2" align=center> Part 5</td>
    </tr>
    </tbody>
</table>

<center>
  <input type="button" onclick="toggleSize()" value="Change It">
</center>

</body>
</html>

Answer 4

试试这个

＆＃13;

.myTable1 {
  height : 1000px;
  width : 400px; 
}


.myTable2 {
  height : 400px;
  width : 10000px; 
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
  <title>eLab</title>
    <script type="text/javascript">
          function change(){
              $('#myTable').toggleClass("myTable1");
              $('#myTable').toggleClass("myTable2");
            }
    </script>
</head>

<body>    
<table border="1" cellpadding="1" cellspacing="1" id="myTable" align="center" class="myTable1">
    <tbody>
        <tr>
            <th>This is the head!</th>
            <th>I'm the head too!</th>
        </tr>
        <tr>
            <td align=center>Part 1</td>
            <td align=center>Part 2</td>
        </tr>
        <tr>
            <td align=center>Part 3</td>
            <td align=center>Part 4</td>
        </tr>
        <tr>
      <td colspan="2" align=center> Part 5</td>
    </tr>
    </tbody>
</table>

<center>
  <input type="button" onclick="change()" value="Change It">
</center>

</body>
</html>

＆＃13;

单击按钮，然后在第一次单击后返回第一个

4 个答案: