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

ここで私は何をしたいですか。「Disable」ボタンをクリックすると、行のハイライト表示とすべてのエフェクトが削除されます。 – 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

テーブルを無効にすることはできません。これで何を達成したいですか？テーブルはとにかく読み込まれます。

テーブルに入力タグがある場合は、それらを1つずつ無効にすることができます。あなたはそれが、無効または有効を「見て」スタイルシートにクラスのルールを追加し、有効または無効にするために、テーブルにクラスを追加したい場合は

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

テーブルを無効にすることはできません。あなたがしたいことは、入力ボタンを無効にし、選択したボタンのonclickイベントでフェードアウト/グレーアウトのような錯覚を与えるHTMLテーブルのクラスを持つことです。

出典

2011-10-26 07:08:23 CPerez721

あなたはこれを行う方法を私にヒントを与えることができますpls。本当にこの事に新しい。ありがとう – NinjaBoy

HTMLテーブルにクラスを追加してください。 Say（table.class） "Disable"を表示させるボタンのonclickイベントが表示されたら、onclickイベントがhtmlテーブルの新しいスタイルを起動することを確認します。（ここではJQuery、CSS3の不透明プロパティのいくつかのルートに行くことができます） – CPerez721

RobGが書いたコードは、簡単な手順のために複雑な方法だと思います。彼の問題ではREGEXの必要はありません。 – CPerez721

テーブルを無効にすることはできません。テーブルにはデータだけが表示されます.HTMLでは、入力、選択、テキストエリアなどのフォーム要素を無効にすることができます。そのため、これ以上対話できません（つまり、データを入力するか、クリックするか、オプションを選択します）。

私は、イベントをonMouseOverに持っていることを考えていますか？ - ボタンクリックで削除しますか？ jQueryを使う方が良いかもしれません - Eventsを見てください。解決策は、このfiddleのようなボタンのクリックでイベントを追加したり削除したりすることです。

出典

2011-10-26 07:13:54 Peavey

このレシピに従う：

2組のCSSルールを定義します。規則の一組は、常に、テーブル全体を有効/無効DOM要素（テーブルidtblTestを有する場合document.getElementbyId('tblTest')を使用して）見つけ、それぞれのクラスを割り当てるtable.disabled

有する他、table.enabled始まる：

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

出典

2011-10-26 07:15:18

テーブルをどこの場所でも「unclickable」にしたい場合は、同じサイズで上記の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テーブルを無効にして有効にするにはどうすればよいですか？

答えて

関連する問題