JSのテーブル内の要素を表示および非表示にする -- javascript フィールド 関連 問題

show and hide element in table by js












0
vote

問題

日本語

 <コード> <!DOCTYPE html>  <html>  <head>  <style>   tr ,table,td  {  border:black solid 1px;  text-align:center;  }  table  {  border-collapse:collapse;  }  #ab  {  background-color:cyan;  }  </style>  </head>  <body>    <table style="width:100%">  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  </table>    </body>  <script >             </script>    </html>  

これらの行のみを選択したい( <tr> <th> <td> ] 私はこの

を改善します <事前> <コード> prop = document.getElementsByTagName("th"); a = prop[0].parentNode.parentNode.children; for(var i=1;i<a.length;i++){ a[i].style.display="none"; }
英語

<!DOCTYPE html>  <html>  <head>  <style>   tr ,table,td  {  border:black solid 1px;  text-align:center;  }  table  {  border-collapse:collapse;  }  #ab  {  background-color:cyan;  }  </style>  </head>  <body>    <table style="width:100%">  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  <tbody>  <tr id='ab'>      <th>Name</th>      <th>work</th>        <th>payment</th>    </tr>    <tr>      <td>Jill</td>      <td>Smith</td>        <td>50</td>    </tr>    <tr>      <td>Eve</td>      <td>Jackson</td>        <td>94</td>    </tr>    <tr>      <td>John</td>      <td>Doe</td>        <td>80</td>    </tr>  </tbody>  </table>    </body>  <script >             </script>    </html>

i want slect only those rows(<tr>) whose element type is <th> and find parentelement and hide content[<td>] how i an improve this

prop = document.getElementsByTagName("th"); a = prop[0].parentNode.parentNode.children; for(var i=1;i<a.length;i++){    a[i].style.display="none"; } 
</div
  
   
   

回答リスト

0
 
vote
<事前> <コード> <table class='tblinfo' style="width: 100%"> <thead> <tr> <th>Name</th> <th>work</th> <th>payment</th> </tr> </thead> <tbody> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> <tr> <td>Jill</td> <td>Smith</td> <td>50</td> </tr> <tr> <td>Eve</td> <td>Jackson</td> <td>94</td> </tr> <tr> <td>John</td> <td>Doe</td> <td>80</td> </tr> </tbody>

あなたがやりたいことはHTMLコードを上回っています。テーブルを使用している場合は、Thode Elementの中にあるelement(ヘッダーとして表示したい要素)がTheadと他のすべてのものにする必要があります。

と表の要素を選択するには、以下のコードが次のとおりです。

<事前> <コード> $('.tblinfo thead tr th').addClass('tablehead');
 
<table class='tblinfo' style="width: 100%"> <thead>     <tr>         <th>Name</th>         <th>work</th>         <th>payment</th>     </tr> </thead> <tbody>     <tr>         <td>Jill</td>         <td>Smith</td>         <td>50</td>     </tr>     <tr>         <td>Eve</td>         <td>Jackson</td>         <td>94</td>     </tr>     <tr>         <td>John</td>         <td>Doe</td>         <td>80</td>     </tr>     <tr>         <td>Jill</td>         <td>Smith</td>         <td>50</td>     </tr>     <tr>         <td>Eve</td>         <td>Jackson</td>         <td>94</td>     </tr>     <tr>         <td>John</td>         <td>Doe</td>         <td>80</td>     </tr>     <tr>         <td>Jill</td>         <td>Smith</td>         <td>50</td>     </tr>     <tr>         <td>Eve</td>         <td>Jackson</td>         <td>94</td>     </tr>     <tr>         <td>John</td>         <td>Doe</td>         <td>80</td>     </tr>     <tr>         <td>Jill</td>         <td>Smith</td>         <td>50</td>     </tr>     <tr>         <td>Eve</td>         <td>Jackson</td>         <td>94</td>     </tr>     <tr>         <td>John</td>         <td>Doe</td>         <td>80</td>     </tr>     <tr>         <td>Jill</td>         <td>Smith</td>         <td>50</td>     </tr>     <tr>         <td>Eve</td>         <td>Jackson</td>         <td>94</td>     </tr>     <tr>         <td>John</td>         <td>Doe</td>         <td>80</td>     </tr> </tbody> 

I think what you wanted to do is above html code. If you are using table,th element(elements you want to show as header) should be inside thead and everything others inside tbody element.

And to select th element of table, below is the code:

$('.tblinfo thead tr th').addClass('tablehead'); 
</div
 
 
0
 
vote

onClickが発射されたときに、すべてのテーブルの行を使用し、親のTbodyを隠して表示します。

<事前> <コード> var tableSection = document.getElementsByClassName("ab"); for(var i = 0; i < tableSection.length; i++){ tableSection[i].onclick = function(){ var tbody = this.parentNode; for(var j = 1; j < (tbody.childNodes.length/3) + 1; j++){ var status = tbody.getElementsByTagName("tr")[j].style.display; if(status == "" || status == "block"){ tbody.getElementsByTagName("tr")[j].style.display = 'none'; } else{ tbody.getElementsByTagName("tr")[j].style.display = ''; } } }; }

jsfiddle

 

Bind onclick event with every table row and hide/show the parent tbody when onclick is fired.

var tableSection = document.getElementsByClassName("ab");  for(var i = 0; i < tableSection.length; i++){     tableSection[i].onclick = function(){         var tbody = this.parentNode;         for(var j = 1; j < (tbody.childNodes.length/3) + 1; j++){             var status = tbody.getElementsByTagName("tr")[j].style.display;             if(status == "" || status == "block"){                 tbody.getElementsByTagName("tr")[j].style.display = 'none';             } else{                 tbody.getElementsByTagName("tr")[j].style.display = '';             }         }     };     } 

jsFiddle

</div
 
 
0
 
vote

 <コード> $p0  
 

props=document.getElementsBytagName('td');  for(var i in props)  {  props[i].style.display="none";  }*/  prop=document.getElementsByTagName("th");  for(var i in prop)  {  prop[i].onclick=b;  }    function b()  {   a= this.parentNode.parentNode.children;   if(a[1].style.display=="")   {    for(var i=1;i<a.length;i++)     {      a[i].style.display="none";     }     }   else   {   for(var i=1;i<a.length;i++)     {      a[i].style.display="";     }     }  }
</div
 
 
0
 
vote

 <コード> $p1  
 

   prop=document.getElementsByTagName("th");  for(var i in prop)  {    prop[i].onclick=b;  }    function b()  {   a= this.parentNode.parentNode.children;         if(a[1].style.display=="")   {        for(var i=1;i<a.length;i++)      {      a[i].style.display="none";     }     }   else   {           for(var i=1;i<a.length;i++)     {      a[i].style.display="";     }     }  }
</div
 
 

関連する質問

142  定義されたフォントのどれがWebページで使用されていたかを検出する方法  ( How to detect which one of the defined font was used in a web page ) 
私のページに次のCSSルールがあるとします。 <コード> body { font-family: Calibri, Trebuchet MS, Helvetica, sans-serif; } ユーザーのブラウザで定義されたフォントの1つを使用...

54  2つの関数の違いは? ( "関数x" vs "var x =関数")[重複]  ( The difference between the two functions function x vs var x function ) 
この質問はすでにここで回答を持っています 閉じられた 8年前> 可能な重複: JavaScript:var functionname = function(){} vs関数name(){} < / a> :の違いは何ですか ...

1279  jQueryでクッキーを設定/設定解除するにはどうすればよいですか。  ( How do i set unset a cookie with jquery ) 
jQueryを使用してCookieを設定して設定します。たとえば、 test という名前のクッキーを作成し、 1 ?に設定します。 ...

0  LazyWeb:要素の訪問されたクラスに基づいてLI要素を削除するJavaScriptが必要  ( Lazyweb need javascript that removes li elements based on visited class of a el ) 
すでにクリックしたように、必要なデータがたくさんあるこのページを持っていますが、頻繁に青色を探す必要があるので、頻繁に繰り返されます。私はこれがより効率的かもしれないことに気づいて、それが含まれているリンクが訪問されたかどうかに基づいて要素を隠されたように設定...

35  ASP.NETカスタムクライアント側の検証  ( Asp net custom client side validation ) 
.NET 2.0 Webサイトでのユーザーコントロールのカスタム検証機能があり、支払われた手数料はかかりません。 ascx ファイルにバリデータコードを置き、 Page.ClientScript.RegisterClientScriptBlock() ...

0  GWTのJavaからJavaScriptに匿名のJavaScriptオブジェクトを渡すにはどうすればよいですか。  ( How can i pass an anonymous javascript object from java to javascript in gwt ) 
JavaScriptライブラリを丸くするGWTラッパーを作成しています。 JavaScript関数の1つは、その引数として匿名オブジェクトを取ります。: <事前> <コード> obj.buildTabs({ hide: true, placeholder: ...

0  リスト項目でディスクを取り除く  ( Getting rid of disc in list item ) 
jQueryを使用してサイトを開発し、jQuery UIタブを作成しています。何らかの理由で、私のタブ(順序付けられていないリスト)は、OS XのFirefox 3を除くすべてのブラウザ(これまでにテスト済み)に弾丸を表示しています.Safari OS X、...

0  JavaScript - 2つの入力のどちらに焦点が当てられていない場合の検出  ( Javascript detecting when neither of two inputs has focus ) 
ページ上の2つの入力に焦点を当てていないときに、特定の機能を呼び出すことができます。ユーザが単に1つの入力から他方の入力に切り替わると、関数を呼び出すことを望まない。任意のアイデア? ...

44  トリプル引用符? ASP.NETでデータバインドJavaScript Stringパラメータを区切る方法  ( Triple quotes how do i delimit a databound javascript string parameter in asp n ) 
Anchor OnClick でJavaScriptデータバインド文字列パラメータを区切りますか? 私はASP.NETリピータコントロールにアンカータグを持っています。 アンカーの OnClick イベントには、JavaScript関数への呼び出しが含ま...

2  サーバーを必要としないクライアント側(JavaScript)グラフライブラリはありますか? [閉まっている]  ( Is there a client side javascript graph library that doesnt require a server ) 
この質問はスタックオーバーフローガイドラインを満たしていません。現在答えを受け付けていません。 この質問を改善したいですか? ...




© 2022 cndgn.com All Rights Reserved. Q&Aハウス 全著作権所有