发表新帖
发表新帖

How to disable and enable HTML table using Javascript?

前端 未结
关注
10 1176
醉梦人生
醉梦人生 2020-12-11 18:04

I want to know how can I disable and enable the highlighting on an HTML table using Javascript by clicking an html button.

Here are my codes:

tabletest.ht

相关标签:
10条回答
  • -上瘾入骨i
    2020-12-11 18:24 
    <html>
<head>
<script type="text/javascript">
disable = new Boolean();
 function highlight(a) {
  if(disable==false)a.className='highlight'
 }

 function normal(a) {
  a.className='normal'
 }
</script>

<style type="text/css">
 table#tblTest {
  width: 100%;
  margin-top: 10px;
  font-family: verdana,arial,sans-serif;
  font-size:12px;
  color:#333333;
  border-width: 1px;
  border-color: #666666;
  border-collapse: collapse;
 }

 table#tblTest tr.highlight td {
  background-color: #8888ff;
 }

 table#tblTest tr.normal {
  background-color: #ffffff;
 }

 table#tblTest th {
  white-space: nowrap; 
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #dedede;
 }

 table#tblTest td {
  border-width: 1px;
  padding: 8px;
  border-style: solid;
  border-color: #666666;
  background-color: #ffffff;
 }
</style>
</head>

<body>
 <table id="tblTest">
  <thead>
   <tr>
    <th>Name</th>
    <th>Address</th>
   </tr>
</thead>
<tbody>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Tom</td>    
        <td>UK </td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Hans</td>   
        <td>Germany</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" > 
        <td>Henrik</td> 
        <td>Denmark</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Lionel</td> 
        <td>Italy</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Ricardo</td>    
        <td>Brazil</td>
    </tr>
    <tr onMouseOver="highlight(this)" onMouseOut="normal(this)" >
        <td>Cristiano</td>  
        <td>Portugal</td>
    </tr>
</tbody>
</table>
 <input type="button" onclick="disable = true;" value="Disable" />
 <input type="button" onclick="disable = false;" value="Enable" />
 </body>
</html>

    Fixed your code. Use a function to check if it's disabled, if it isn't, then highlight. If it is, then don't. Simple enough.

    Demo

    0 讨论(0)
  • 萌比男神i
    2020-12-11 18:25

    A table cannot be disabled. What you want to do is disable the input button and have class on the HTML Table that gives sort of the illusion of fading out/ graying out on the onclick event of the button you choose.

    0 讨论(0)
  • 甜味超标
    2020-12-11 18:25

    Follow this recipe:

    Define two sets of CSS rules. One set of rules always starts with table.enabled, the other with table.disabled

    To enable/disable the whole table, locate the DOM element (using document.getElementbyId('tblTest') when the table has the id tblTest) and assign the respective class:

    document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';
    0 讨论(0)
  • 爱一瞬间的悲伤
    2020-12-11 18:27

    This will remove the onmouseover events from your tr's.

      function disableTable() {
   var rows = document.getElementsByTagName("tr");
   for (var i = 0; i < rows.length; i++) {
     rows[i].onmouseover= null;
   } 
  }
    0 讨论(0)
 看不清?
提交回复
热议问题