如何禁用和启用使用javascript的HTML表格？ [英] How to disable and enable HTML table using javascript?

问题描述

我想知道如何通过点击html按钮来禁用和启用使用javascript的HTML表格的突出显示。

以下是我的代码：

tabletest.html

 < HTML> 
< head> 
< script type =text / javascript> 
 function disableTable（）{
 document.getElementbyId（'tblTest'）。disabled = true; 
 
 
 function enableTable（）{
 document.getElementbyId（'tblTest'）。disabled = false; 
} 
< / script> 
 
< style type =text / css> 
 table＃tblTest {
 width：100％; 
 margin-top：10px; 
 font-family：verdana，arial，sans-serif; 
 font-size：12px; 
颜色：＃333333; 
 border-width：1px; 
 border-color：＃666666; 
 border-collapse：collapse; 
} 
 
 table＃tblTest tr.highlight td {
 background-color：＃8888ff; 
} 
 
表＃tblTest tr.normal {
 background-color：#ffffff; 
} 
 
表＃tblTest th {
 white-space：nowrap; 
 border-width：1px; 
 padding：8px; 
 border-style：solid; 
 border-color：＃666666; 
 background-color：#dedede; 
} 
 
表＃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>名称< / th> 
< th>地址< / th> 
< / tr> 
< / thead> 
< tbody> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td> Tom< / td> 
< td> UK< / td> 
< / tr> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td>汉斯< / td> 
< td>德国< / td> 
< / tr> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td> Henrik< / td> 
< td>丹麦< / td> 
< / tr> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td> Lionel< / td> 
< td>意大利< / td> 
< / tr> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td>里卡多< / td> 
< td>巴西< / td> 
< / tr> 
< tr onMouseOver =this.className ='highlight'onMouseOut =this.className ='normal'> 
< td>克里斯蒂亚诺< / td> 
< td>葡萄牙< / td> 
< / tr> 
< / tbody> 
< / table> 
< input type =buttononclick =disableTable（）; value =禁用/> 
< input type =buttononclick =enableTable（）value =Enable/> 
< / body> 
< / html> 
  

每当我点击禁用按钮时，表格突出显示仍处于启用状态。
我有点新，所以我真的需要你的帮助。

解决方案

 < HTML> 
< head> 
< script type =text / javascript> 
 disable = new Boolean（）; 
函数highlight（a）{
 if（disable == false）a.className ='highlight'
} 
 
函数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; 
颜色：＃333333; 
 border-width：1px; 
 border-color：＃666666; 
 border-collapse：collapse; 
} 
 
 table＃tblTest tr.highlight td {
 background-color：＃8888ff; 
} 
 
表＃tblTest tr.normal {
 background-color：#ffffff; 
} 
 
表＃tblTest th {
 white-space：nowrap; 
 border-width：1px; 
 padding：8px; 
 border-style：solid; 
 border-color：＃666666; 
 background-color：#dedede; 
} 
 
表＃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>名称< / th> 
< th>地址< / 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>汉斯< / td> 
< td>德国< / td> 
< / tr> 
< tr onMouseOver =highlight（this）onMouseOut =normal（this）> 
< td> Henrik< / td> 
< td>丹麦< / td> 
< / tr> 
< tr onMouseOver =highlight（this）onMouseOut =normal（this）> 
< td> Lionel< / td> 
< td>意大利< / td> 
< / tr> 
< tr onMouseOver =highlight（this）onMouseOut =normal（this）> 
< td>里卡多< / td> 
< td>巴西< / td> 
< / tr> 
< tr onMouseOver =highlight（this）onMouseOut =normal（this）> 
< td>克里斯蒂亚诺< / td> 
< td>葡萄牙< / td> 
< / tr> 
< / tbody> 
< / table> 
< input type =buttononclick =disable = true; value =禁用/> 
< input type =buttononclick =disable = false; value =启用/> 
< / body> 
< / html> 
  

修正了您的代码。使用函数来检查它是否被禁用，如果不是，则突出显示。如果是，那就不要。很简单。

演示 p>

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

<html>
<head>
<script type="text/javascript">
 function disableTable() {
  document.getElementbyId('tblTest').disabled = true;
 }

 function enableTable() {
  document.getElementbyId('tblTest').disabled = false;
 }
</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="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Tom</td>    
        <td>UK </td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Hans</td>   
        <td>Germany</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" > 
        <td>Henrik</td> 
        <td>Denmark</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Lionel</td> 
        <td>Italy</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Ricardo</td>    
        <td>Brazil</td>
    </tr>
    <tr onMouseOver="this.className='highlight'" onMouseOut="this.className='normal'" >
        <td>Cristiano</td>  
        <td>Portugal</td>
    </tr>
</tbody>
</table>
 <input type="button" onclick="disableTable();" value="Disable" />
 <input type="button" onclick="enableTable()" value="Enable" />
 </body>
</html>

Whenever I click the Disable button the table highlighting is still enabled. I'm kinda new to this so I really need your help.

解决方案

<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

这篇关于如何禁用和启用使用javascript的HTML表格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！