1

テーブルの最後の列の周りの奇妙な境界線を見てください...

ここに画像の説明を入力

テーブルは次のようになります。

<table style="font-family: courier new; font-size: 0.75em" border="1" cellspacing="0" cellpadding="3">
<tbody>
   <tr id="tableheader" class="">
      <th title="id">id</th>
      <th title="old_name">old_name</th>
      <th title="new_name">new_name</th>
      <th class="edit" title="Edit Options" style="display: block; overflow: hidden;">Edit Options</th>
   </tr>
   <tr class="tableevenrow">
      <td data-col="id" valign="middle" align="left"><div>1</div></td>
      <td data-col="old_name" valign="middle" align="left"><div>taco</div></td>
      <td data-col="new_name" valign="middle" align="left"><div>bell</div></td>
      <td class="edit" data-col="editoptions" valign="middle" align="left" style="display: block; overflow: hidden;">
         <div class="row0 col3 col_editoptions">
            <div class="edit" style="display: block; overflow: hidden;">
               <select id="dropdown_0">
                  <option value="1">Confirm</option>
                  <option value="0">Decline</option>
               </select>
               <button id="submit_r0">Submit</button>
            </div>
         </div>
      </td>
   </tr>

基本的にこれら2つの状態を切り替えるだけのボタンがあります。

        $('.edit').css('display','none'); 
        $('.norm').css('display','block'); 

        $('.edit').css('display','block'); 
        $('.norm').css('display','none');

そのため、編集クラスで何かが「なし」に設定されている場合、「編集オプション」列全体が画面にまったく表示されません。このトグルは機能します。唯一の問題は、編集クラスが表示されると、この列の周囲に奇妙な境界線が表示されることです。誰かがそれを修正する理由と方法を知っているかどうか疑問に思っていました。私のボタンは、テーブルの下の編集/標準クラス (div にあります) で可視性を切り替えますが、それらの周りに境界線が表示されません...

これはテーブル スタイリングの css です... 継承されますが (一種)、動的であっても、これを変更しないようにする必要があります。

 body          { background: #e8ccbb; }
   .tableheader  { background: #4d4e86; color: #ffffff; }
   .tableoddrow  { background: #c2bad4; }
   .tableevenrow { background: #c2c3c2; }
   #tableheader  { background: #4d4e86; color: #ffffff }
   #tableoddrow  { background: #c2bad4 }
   #tableevenrow { background: #c2c3c2 }
   #hiliterow    { background: #ffffff }
   .menu_color {
      background:#4d4e86;
      background-image:-webkit-gradient(linear,left top,left bottom,from(#c2bad4),to(#4d4e86));
      background:-webkit-linear-gradient(top,#c2bad4,#4d4e86);
      background:-moz-linear-gradient(top,#c2bad4,#4d4e86);
      background:-o-linear-gradient(top,#c2bad4,#4d4e86);
      background:-ms-linear-gradient(top,#c2bad4,#4d4e86);
      background:linear-gradient(top,#c2bad4,#4d4e86)
   }

また...補足...私はこれを実現するためにPHPを使用しています.現在または過去に自分自身をフロントエンド開発者として説明することは決してありません....おそらく将来ですが、誰が知っていますか.

4

2 に答える 2

3

display: table-cellこれは、ブロック表示をトリガーしているためですが、代わりにそうする必要があります

于 2013-03-07T18:36:14.393 に答える
1

1 つのボタンを使用して、 jQuery を使用してセルを表示および非表示にすることをお勧めし.toggle()ます。これは、トグル要素の「最初の」表示を気にする必要がないためです-jQueryがそれを行います。

$('#my_button').click(function(){
    $('#el_to_toggle').toggle();
});

実装: http://jsfiddle.net/Dr3Cm/

参照:

于 2013-03-07T18:42:24.937 に答える