如何禁用和啓用使用JavaScript的HTML表？

我想知道如何通過單擊HTML按鈕來禁用並啓用使用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; 
    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按鈕表高亮仍處於啓用狀態。我有點新，所以我真的需要你的幫助。

來源

2011-10-26 NinjaBoy

'disabled'意味着一個形式控制將不會被提交，並且不能進行編輯。表格不是表單控件，所以你所要求的是沒有意義的。 – Quentin

這就是我想要發生的事情。當我點擊'禁用'按鈕時，我想要突出顯示行並刪除所有效果。 – NinjaBoy

<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

來源

2011-10-26 07:33:39

您無法禁用表格。你想用這個做什麼？無論如何，表格只能讀取。

如果您在表格中有輸入標籤，則可以逐個禁用這些標籤。

也"Disabling" an HTML table with javascript

來源

2011-10-26 06:49:32 PiTheNumber

我希望它看起來是一個禁用的HTML按鈕。 – NinjaBoy

但是一張桌子不是一個按鈕。您可以更改表類並通過CSS定義禁用的樣式：

，CSS：.disabled tr {background-color：gray; } – PiTheNumber

看到，如果你希望它「看」禁用或啓用，添加類規則的樣式表，並添加類的表啓用或禁用。

function disableTable() { 
    addClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 
function enableTable() { 
    removeClassName(document.getElementbyId('tblTest'), 'disabled'); 
} 

function trim(s) { 
    return s.replace(/(^\s+)|(\s+$)/g,'').replace(/\s+/g,' '); 
} 

function hasClassName (el, cName) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)'); 
    return el && re.test(el.className); 
} 

function addClassName(el, cName) { 
    if (!hasClassName(el, cName)) { 
     el.className = trim(el.className + ' ' + cName); 
    } 
} 

function removeClassName(el, cName) { 
    if (hasClassName(el, cName)) { 
    var re = new RegExp('(^|\\s+)' + cName + '(\\s+|$)','g'); 
    el.className = trim(el.className.replace(re, '')); 
    } 
}

來源

2011-10-26 06:57:10 RobG

你能給我一個提示如何做到這一點。我對這件事情真的很陌生。謝謝 – NinjaBoy

無法禁用表格。你想要做的就是禁用輸入按鈕，並在HTML表格上添加類，這會給你選擇的按鈕的onclick事件帶來淡化/淡化的錯覺。

來源

2011-10-26 07:08:23 CPerez721

你能給我一個提示如何做到這一點。我對這件事情真的很陌生。謝謝 – NinjaBoy

在你的HTML表格中添加一個類。說（table.class）現在在你選擇顯示「禁用」的按鈕的onclick事件上，確保onclick事件觸發html表格的新樣式。（你可以在這裏使用一些路徑，例如JQuery，CSS3 Opacity屬性） – CPerez721

我認爲RobG寫的代碼片段對於一個簡單的過程來說很複雜。他的問題不需要REGEX。 – CPerez721

您無法禁用表格。一個表格只顯示數據 - 在HTML中，您只能禁用輸入，選擇和textareas等表單元素，所以您不能再與它們交互（即鍵入數據，單擊它或選擇一個選項）。

我認爲你正在努力實現的是讓事件onMouseOver/-Out刪除按鈕單擊？您最好使用jQuery - 看看Events。解決方案是在按鈕點擊時添加和移除事件，如fiddle。

來源

2011-10-26 07:13:54 Peavey

請遵循以下配方：

定義兩套CSS規則。的規則的一組總是用table.enabled開始，其他與table.disabled

要啓用/禁用整個表，找到DOM元素（使用document.getElementbyId('tblTest')當表具有idtblTest）並分配相應的類：

document.getElementbyId('tblTest').classname = enabled ? 'enabled' : 'disabled';

來源

2011-10-26 07:15:18

如果你想讓表格在任何地方「不可點擊」 - 你可以在同一尺寸的上面添加一個transperent div。

來源

2011-10-26 07:17:58

這將從您的tr中刪除onmouseover事件。

function disableTable() { 
    var rows = document.getElementsByTagName("tr"); 
    for (var i = 0; i < rows.length; i++) { 
    rows[i].onmouseover= null; 
    } 
    }

來源

2011-10-26 07:30:57 roel

相關問題

如何禁用和啓用使用JavaScript的HTML表？

回答

相關問題