Question

我动态地对待表格。此外，我创建了文本框，应该在用户单击以在其中一个文本框中输入文本后禁用所有其他文本框。我正在努力的是在我点击的文本框旁边创建按钮。我当前的代码显示在同一位置的按钮。无论我点击我的按钮上的哪个文本框始终显示在第一个文本框旁边。 HTML代码：

getSupportActionBar()

JQuery代码：

public interface IFooService
{
    void DoSomethingFooey();
}
public class FooService : IFooService
{
    readonly IBarService _barService;

    public FooService() : this(new BarService()) {}

    public FooService(IBarService barService)
    {
        this._barService = barService;
    }

    public void DoSomethingFooey()
    {
        // some stuff
        _barService.DoSomethingBarey();
    }
}


public interface IBarService
{
    void DoSomethingBarey();
}
public class BarService : IBarService
{
    readonly IBazService _bazService;

    public BarService() : this(new BazService()) {}

    public BarService(IBazService bazService)
    {
        this._bazService = bazService;
    }

    public void DoSomethingBarey()
    {
        // Some more stuff before doing ->
        _bazService.DoSomethingBazey();
    }
}


public interface IBazService
{
    void DoSomethingBazey();
}
public class BazService : IBazService
{
    public void DoSomethingBazey()
    {
        Console.WriteLine("Blah blah");
    }
}

我不确定为什么按钮只出现在第一行。我的文本框功能正常。如果我在一个文本框中单击，则其他所有内容都将被阻止。唯一的问题是我的按钮不是在我点击的文本框旁边创建的，而是第一个。如果有人知道我的代码在哪里打破，请告诉我。谢谢。

Answer 1

使用next()和prev()查找下一个和上一个元素，如下所示。希望这会对你有所帮助。

$(".fname").keyup(function (e) {
     if ($(this).val() != '') {
        $(".fname").not(this).attr('disabled', 'disabled');
        $(this).next(".test").show();
     } else {
        $(".fname").removeAttr('disabled');
        $(this).next(".test").hide();
     }
});

$(".test").click(function (e) {
     alert($(this).prev(".fname").val())
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
    <tr>
        <td>#TimeFormat(StartTime,'hh:mm tt')#</td>
        <td>#TimeFormat(EndTime,'hh:mm tt')#</td>
        <td>
            <input type="text" name="fname" class="fname">
            <input type="button" class="test" name="test" value="Save" style="display: none">
        </td>
    </tr>
</table>

<强>更新

按钮：

<input type="button" class="test" name="test" onclick="testButton(this)" value="Save" style="display: none">

JS功能

function testButton(btn) { var test = $(btn).prev('.fname').val(); alert(test); }

Answer 2

Azim的答案部分正确，＆＃34; next＆＃34;选择器不能是ID选择器，否则您只选择具有特定ID的特定文本框。正确的方法是：

ok

示例：here

Answer 3

这是因为所有按钮都具有相同的ID。因此，$("#test")始终会找到第一个按钮：

您需要使用类而不是id，如下所示：

<input type="button" class="test" value="Save" onClick="testButton()" style="display: none">

然后，你的关键事件应该是这样的：

$(document).ready(function() {
    $(":text").keyup(function(e) {
        if($(this).val() != '') {
            $(":text").not(this).attr('disabled','disabled');
            $(this).next(".test").show();
        } else {
            $(":text").removeAttr('disabled');
            $(this).next(".test").hide();
        }
    });
});

如何在文本框中键入文本后显示按钮？

3 个答案: