0

ここに Jsfiddle アプリケーションがあります。

フィドルにアクセスして出力が表示されたら、次のようにしてください。

  1. [Open Grid] リンクをクリックし、数字ボタンの 1 つを選択します。数字ボタンを選択すると、下に文字ボタンが表示されます。

  2. 「Open Grid」ボタンをもう一度クリックして別の数字ボタンを選択すると、文字ボタンが変更されていることがわかります。これで問題ありません。

  3. [質問を追加] ボタンをクリックすると、上部のコントロールからの選択を表示する行が追加されます。

  4. ここが問題です。追加したばかりの行内で、[Open Grid] リンクをクリックして別の数字ボタンを選択すると、表の行内で、文字ボタンが想定どおりにまったく変更されないことがわかります。それが私が抱えている問題です。

今では、javascript コードで動作していましたが、コードは次のとおりです。

var $tbody = $('#qandatbl > tbody'); 
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<td class='option'></td>");
var $answer = $("<td class='answer'>");

しかし、表の行内のコントロールを次々と上に表示したいので、いくつかの<tr>タグを$optionsandに追加$answerして、コードが次のようになるようにしました。

var $tbody = $('#qandatbl > tbody'); 
var $tr = $("<tr class='optionAndAnswer' align='center'></tr>");
var $options = $("<tr><td class='option'></td></tr>");
var $answer = $("<tr><td class='answer'></tr>");

だから私の質問は、タグを追加したためにテーブル行内の文字ボタンを変更しないのはなぜ<tr>ですか?どうすれば修正できますか?

また、表の行を追加すると、1 列だけでなく 2 列が表示されるのはなぜですか?

4

2 に答える 2

0

on関数を次のように更新し(セレクターを変更)、preventDefault を追加しました。

 $('table').on('click','.showGrid', function(e) {
    e.preventDefault();
    $(".gridBtns").removeClass("gridBtnsOn");

    var value = $(this)
        .siblings('input[name=gridValues[]]').val();

    $("#btn" + value.replace(/\s/g, '')).addClass("gridBtnsOn");

    $('.optionTypeTbl').fadeToggle('slow');
    $(this).parent().append($('.optionTypeTbl'));
    $('.optionTypeTbl').css({

        left: $(this).position().left,
        top: $(this).position().top + 20

    });

    e.stopPropagation();

});

http://jsfiddle.net/w2wJs/9/

于 2012-05-29T12:43:20.247 に答える
0

<tr>内に要素を含めることはできません<tr>。また、追加のマークアップで HTML が台無しになります。「質問を追加」ボタンをクリックすると、次のような結果が得られます。

<tbody>
  <tr class="optionAndAnswer">
    <tr>
      <td class="option"></td>
      <input type="text" ....  />
      <span class="showGrid">[Open Grid]</span>
    </tr>
    <tr>
      <td class="answer"></td>
      <tr>
        <td>
          <input class="answerBtns" value="A" />
          <input class="answerBtns" value="B" />
          <input class="answerBtns" value="C" />
        </td>
      </tr>
    </tr>
  </tr>
</tbody>

これはかなり汚れており、きれいにする必要があります。

私はあなたのフィドルをより良い HTML 構造を持つように変更しましたが、それでもあなたが望むように見えます: http://jsfiddle.net/w2wJs/10/

于 2012-05-29T12:37:48.620 に答える