jquery帮助在文本框中显示值

时间:2011-12-20 18:30:04

标签: jquery

在我的应用程序中,用户打开一个网格并选择一个选项。用户在单击“添加问题”按钮后选择该选项后,将在表格中添加一个新行,显示文本框中的选项值。

现在让我们假设用户改变主意并希望在他们添加的表格行中想要更改其选项值,用户可以通过单击表格行中的“打开网格”链接打开网格并选择另一个选项。唯一的问题是,他们选择的选项应该显示在表格行的文本框中,但不是,而是显示在用户最初选择选项的顶部文本框中。

那么如何才能获得它,以便用户更改表格行中的选项时,该值会显示在行内的文本框中而不是顶部的文本框中?

跟随我的小提示帮助你:

  1. 打开网格并选择选项“3”

  2. 点击“添加问题”,您可以看到添加了一个新行,显示您在文本框中选择的选项

  3. 现在在新行中,您已添加了“打开网格”链接并选择选项“5”。现在您可以看到表格行中的文本框仍然显示“3”,但如果您查看顶部的文本框,则显示“5”。顶部的文本框不应更改为“5”,它应该是表格行中的文本框。

  4. 使用jsfiddle以便您可以看到我的意思,您可以使用它来测试您的想法,点击here

1 个答案:

答案 0 :(得分:0)

首先,在淡出它们之后,您不必隐藏一组匹配的元素。 参考:

$('body').on('click', function() {
    $('#optionTypeTbl').fadeOut('slow');
    $('#optionTypeTbl').hide();
});

然后我个人认为代码可能更好。您基本上将选项表作为固定元素。但是你实际上也可以删除它,因为它结束了淡入淡出,当然它仍然在你的脚本中的变量中,并在用户点击[Open Grid]到适当的地方时附加它。 (我仍然没有完成整个代码,因此我无法立即提供样本。给我一些时间。)然后,而不是使用

$('#optionTypeTbl input').click(function() {
    $(".gridBtns").removeClass("gridBtnsOn");
    $(this).addClass("gridBtnsOn");
    // THIS FOLLOWING LINE
    $('.box INPUT').val($(this).val());
    $('#optionTypeTbl').hide();
});

由于您现在已将选项表作为所单击的[打开网格]链接的父项的子项,因此您可以使用closest来引用其父项:

$( this ).closest( 'tr' ).find( '.box input' ).val( $( this ).val( ) );

说实话,如果不改变你行为的大部分内容,我就无法解决你的问题。我需要一点时间来修复我的代码版本。

EDITH:

好的,所以我已经为你的小提琴工作了,并提出了一个工作片段。 Here你走了!