0

1、2、3、4 などの一致する ID を持つ 5 つにグループ化された行を持つテーブルがあります。

テーブルの最後に到達するまで、次のボタンを含む 1 つの id の各行のみを表示し、次に次のボタンを含む 2 つの行を表示する必要があります。その後、囲まれたフォームの送信ボタンを表示します。テーブル内。

私は完全な JavaScript 初心者です。そのため、jquery トグル関数を使用しようとすると、どこにも行きません! 少なくとも、テーブル内の複数の行でトグル機能を備えたチュートリアルの方向に誰かが私を向けることができれば、本当に感謝しています。

乾杯！

編集：混乱して質問をもう一度読んだ後、jquery内で使用する正しい関数へのポインターが必要なだけであるという事実が明確ではないことに気付きました。そして、私が正しいボールパークにいる場合。私はコードが完全に書かれることを望んでいません。申し訳ありませんが、そのように出くわしました。

4

2 に答える 2

0

tbody 要素を切り替えるだけのかなり一般的なものを使用できます。必要に応じて以下を調整します。ID は必要ありません。

行をグループ化して、扱いやすくするために tbody 要素で表示および非表示にしました。

<script>

var toggleRows = (function() {
    var hidden = -1;

    return function(el) {
      var tbodies;

      // Get the table from the passed element
      // The element must be in the table, or be the table
      while (el.tagName.toLowerCase() != 'table') {
        el = el.parentNode;
      }

      // Get just tbody elements, exclude thead and tfoot
      tbodies = el.tBodies;

      // Hide them all
      for (var i=0, iLen=tbodies.length; i<iLen; i++) {
        tbodies[i].style.display = 'none';
      }

      // Show the next tbody, or first if were showing the last one
      tbodies[++hidden % iLen].style.display = '';
    }

}());

window.onload = function() {
  toggleRows(document.getElementById('section1'));
}
</script>

<table>
  <thead>
    <tr>
      <th colspan="3"><span onclick="toggleRows(this);">Show next</span></th>
    </tr>
  </thead>
  <tbody id="section1">
    <tr>
      <td>foo 1<td>bar 1<td>fum 1
  <tbody id="section2">
    <tr>
      <td>foo 2<td>bar 2<td>fum 2
  <tbody id="section3">
    <tr>
      <td>foo 3<td>bar 3<td>fum 3
</table>
于 2012-11-14T00:50:20.797 に答える
0

jquery のトグルを具体的に学習するのに助けが必要な場合は、Jquery のドキュメントを参照してください。

上記のコメントでお気づきかもしれませんが、StackOverflow はコードを渡されるサイトではありません。自分でコーディングする必要があり、細かい修正、構文、紛らわしい概念などについてアドバイスやヒントを提供できます。問題にアプローチします。

これは、 Codeschool で初めて Jquery を学んだときに使用した非常に優れたチュートリアルです。それは本当にインタラクティブで、あなたは本当に速く学びます。また、Javascript の基本中の基本を教えてくれると思います。

W3schoolsは、JS や Web 開発全般の学習にも非常に適しているため、ぶらぶらしたくなるかもしれません。

さらにコードを投稿すると、回答を編集して問題の解決に役立てることができます。テーブルを扱う優れたチュートリアルが必要でした。特にテーブルを扱う JS チュートリアルを見つけることができるかもしれませんが、それはあなたが学ぶべき方法ではありません。私はあなたのニーズに合ったチュートリアルを見つけようとしますが、あなたはゼロから学び、自分の道を進むべきです. それが私がやった方法であり、私たちの多くがそうしました。

お役に立てれば。

于 2012-11-14T00:49:50.370 に答える