0

我在这里有一个 Jsfiddle 应用程序。

当您访问小提琴并看到输出时，请执行以下操作：

  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>标签，$options因此$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>标签，如何解决这个问题？

此外，当添加表格行时，为什么它显示两列而不是一列？

4

2 回答 2

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 回答
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 回答