Come disabilitare e abilitare la tabella HTML usando javascript?

Voglio sapere come disabilitare e abilitare l'evidenziazione su una tabella HTML utilizzando javascript facendo clic su un pulsante html.Come disabilitare e abilitare la tabella HTML usando javascript?

Qui ci sono i miei codici:

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>

Ogni volta che fate clic sul pulsante Disable l'evidenziazione tavolo è ancora abilitato. Sono un po 'nuovo per questo, quindi ho veramente bisogno del tuo aiuto.

fonte

2011-10-26 NinjaBoy

'disabled' significa che un controllo di modulo non sarà presentata e non può essere modificato. Le tabelle non sono controlli di forma, quindi quello che chiedi non ha senso. – Quentin

Ecco cosa voglio accadere. Quando clicco sul pulsante 'Disabilita', voglio che l'evidenziazione della riga e tutti gli effetti siano rimossi. – 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>

fissa il codice. Utilizzare una funzione per verificare se è disabilitata, in caso contrario, quindi evidenziare. Se lo è, allora non farlo. Abbastanza semplice

Demo

fonte

2011-10-26 07:33:39

Non è possibile disabilitare una tabella. Cosa vuoi ottenere con questo? I tavoli sono letti solo in ogni caso.

Se nella tabella sono presenti tag di input, è possibile disabilitarli uno per uno.

Vedi anche "Disabling" an HTML table with javascript

fonte

2011-10-26 06:49:32 PiTheNumber

Voglio sembrare un pulsante html disabilitato. – NinjaBoy

Ma una tabella non è un pulsante. Puoi modificare la classe della tabella e definire lo stile disabilitato tramite CSS:

, CSS: .disabled tr {background-color: gray; } – PiTheNumber

Se si vuole che "look" disabilitato o abilitato, aggiungere regole di classe ad un foglio di stile e aggiungere le classi al tavolo per attivata o disattivata.

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, '')); 
    } 
}

fonte

2011-10-26 06:57:10 RobG

Puoi darmi un suggerimento su come farlo. Sono davvero nuovo a questa cosa. Grazie – NinjaBoy

Una tabella non può essere disabilitata. Quello che vuoi fare è disabilitare il pulsante di input e avere lezione sulla tabella HTML che dà l'illusione di sbiadire/ingrigire l'evento onclick del pulsante che scegli.

fonte

2011-10-26 07:08:23 CPerez721

Puoi darmi un suggerimento su come farlo. Sono davvero nuovo a questa cosa. Grazie – NinjaBoy

Aggiungi una classe alla tua tabella HTML. Dì (table.class) Ora sull'evento onclick per il pulsante su cui hai scelto di visualizzare "Disattiva", assicurati che l'evento onclick attivi i nuovi stili per la tabella html. (Puoi fare alcuni percorsi qui, tra cui JQuery, proprietà Opacity CSS3) – CPerez721

Penso che il pezzo di codice scritto da RobG sia un modo complicato per una semplice procedura. Non c'è bisogno di REGEX nel suo problema. – CPerez721

Non è possibile disabilitare una tabella. Una tabella mostra solo i dati: in HTML è possibile disabilitare solo gli elementi del modulo come input, select e textareas, quindi non è più possibile interagire con essi (ad esempio, digitare i dati, fare clic o selezionare un'opzione).

Penso che quello che stai cercando di ottenere è avere gli eventi onMouseOver/-Out remove on click del pulsante? Potrebbe essere meglio usare jQuery - dare un'occhiata a Events. La soluzione è aggiungere e rimuovere eventi sul clic del pulsante come in questo fiddle.

fonte

2011-10-26 07:13:54 Peavey

Seguire questa ricetta:

definire due insiemi di regole CSS. Una serie di regole inizia sempre con table.enabled, l'altra con table.disabled

Per attivare/disattivare l'intera tabella, individuare l'elemento DOM (utilizzando document.getElementbyId('tblTest') quando la tabella ha la idtblTest) e assegnare la rispettiva classe:

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

fonte

2011-10-26 07:15:18

Se si desidera rendere il tavolo "non modificabile" in qualsiasi punto di esso, è possibile aggiungere un div transperent con le stesse dimensioni.

fonte

2011-10-26 07:17:58

Ciò rimuoverà gli eventi onmouseover dalle tue tr.

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

fonte

2011-10-26 07:30:57 roel

Come disabilitare e abilitare la tabella HTML usando javascript?

risposta

Problemi correlati