0

こんにちは、みんな？ボタンが押されるまで div コンテンツを非表示にするにはどうすればよいですか? テーブルの「新しい教師を追加」ボタンが押されるまで、このdivが表示されないようにしたいです。これは、ボタンが押されるまで非表示にしたい div コンテンツです

     <div id="myform">
<p align="center">
<strong>
Add information for new teacher here
</strong></p>
<form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1">
  <table align="center" id="forms">
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">First name:</td>
      <td><input type="text" name="first_name" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Last name:</td>
      <td><input type="text" name="last_name" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Subjects:</td>
      <td><input type="text" name="subjects" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Phonenumber:</td>
      <td><input type="text" name="phonenumber" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Email:</td>
      <td><input type="text" name="email" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Username:</td>
      <td><input type="text" name="username" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">Password:</td>
      <td><input type="text" name="password" value="" size="32" /></td>
    </tr>
    <tr valign="baseline">
      <td nowrap="nowrap" align="right">&nbsp;</td>
      <td><input type="submit" value="Insert record" id="hideit"/></td>
    </tr>
  </table>
  <input type="hidden" name="MM_insert" value="form1" />
</form>
<p>&nbsp;</p>
</div>

そして、これは「新しい教師を追加」ボタンを含む私のテーブルです

    <p align="center">
<strong>
List of teachers in Minaki Sec school
</strong></p>
<table border="1" align="center" class="altrowstable" id="alternatecolor">
  <tr id="row">
    <th>teacher id</th>
    <th>first name</th>
    <th>last name</th>
    <th>subjects</th>
    <th>Phonenumber</th>
    <th>Email</th>
    <th>username</th>
    <th>password</th>
    <th>Edit</th>
    <th>Delete</th>
    <th>Details</th>
  </tr>
  <?php do { ?>
    <tr>
      <td><?php echo $row_teacherrec['teacher_id']; ?></td>
      <td><?php echo $row_teacherrec['first_name']; ?></td>
      <td><?php echo $row_teacherrec['last_name']; ?></td>
      <td><?php echo $row_teacherrec['subjects']; ?></td>
      <td><?php echo $row_teacherrec['phonenumber']; ?></td>
      <td><?php echo $row_teacherrec['email']; ?></td>
      <td><?php echo $row_teacherrec['username']; ?></td>
      <td><?php echo $row_teacherrec['password']; ?></td>
      <td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Edit</button></td>
      <td><button onclick="location.href= 'delete_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Delete</button></td>
      <td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Details</button></td>
    </tr>
    <?php } while ($row_teacherrec = mysql_fetch_assoc($teacherrec)); ?>
    <tr>
    <td colspan="8"></td>
    <td colspan="6" align="center"><button id="showit" onclick="location.href='teacher.php'">+Add new Teacher</button></td>
   </tr>
   </table>
4

6 に答える 6

3

のようにしてみてください。

$(function(){
   $('button#showit').on('click',function(){  
      $('#myform').show();
   });
});

最初は次のようにdivなりますhidden

<div id="myform" style="display:none">
.....
于 2013-09-11T11:14:11.107 に答える
1

div にスタイルを追加し、ボタン クリックでdisplay:none呼び出します。$("#div-id").show();

<div id="myform" style="display:none">
  // contents here
</div>
于 2013-09-11T11:14:00.183 に答える
1

新しい教師用フォームにインライン スタイルを追加してフォームを非表示にします

<div id="myform" style="display:none">

またはあなたのjQuery内に追加するだけです

$(document).ready(function(){
    // hide form on page load
    $('#myform').hide();

    // when button is pressed
    $('button').on('click',function(){  
      $('#myform').show();
   });
});
于 2013-09-11T11:16:07.877 に答える
1

コードに次の変更を加えます。

<div id="myform" style="display:none;">

非表示にするスタイルを div に追加します。

ボタンのコードを次のように変更します。

<button id="showit">+Add new Teacher</button>

そして、この jQuery を追加します。

$(document).ready(function(){
   $("#showit").click(function(){
       $("#myform").css("display","block");
   });
});
于 2013-09-11T11:18:37.510 に答える
0

jQueryのhide関数とshow関数を使用できます。

ここ

見せる

隠れる

于 2013-09-11T11:14:26.577 に答える
0 
$(function(){
    $('.button_name').click(function(){  
      $('#myform').show();
    });
 });





<button class="button_name">


    <div id="myform" style="display:none">

またはJavaスクリプトを使用して

function new_disp(){
   document.getElementById('myform').style.display='block';
 }




<button onclick='new_disp();'>


    <div id="myform" style="display:none">
于 2016-11-05T13:41:08.570 に答える