gpt4 book ai didi

javascript - 如何使用 Javascript 禁用和启用 HTML 表格?

转载 作者:数据小太阳 更新时间:2023-10-29 05:06:28 25 4
gpt4 key购买 nike

我想知道如何通过单击 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;
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>

每当我单击 Disable 按钮时,表格突出显示仍处于启用状态。我对此有点陌生,所以我真的需要你的帮助。

最佳答案

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

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

Demo

关于javascript - 如何使用 Javascript 禁用和启用 HTML 表格?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/7899453/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com