Javascript 如果输入有值，jquery将显示表行。错误的键控功能

我有一些表格行，里面有文本输入。 每行都有一个唯一的名称fp0、fp1、fp2、fp3。。。 输入从php数组中获取一个值，但有时数组是空的，没有值。 如果输入有值，则TR应显示

HTML:

这有点难以解释，但这里有一个例子 我想这就是你要找的。放置代码以隐藏或显示此事件侦听器中的元素

如果还希望在加载元素时将可见性设置为正确的值，也可以从

onload

调用相同的代码。可能需要将

onload

属性添加到输入中（而不是使用jQuery，具体取决于执行jQuery代码的时间）。

首先替换：

 this.value

与

因为

这改变了jQuery事件中的含义

接下来，不要使用
keyup
，而是尝试使用
change

$("#fp_name0").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp1").slideDown();
    } else {
        $("#fp1").slideUp();
    }
});

$("#fp_name1").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp2").slideDown();
    } else {
        $("#fp2").slideUp();
    }
});

$("#fp_name2").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp3").slideDown();
    } else {
        $("#fp3").slideUp();
    }
});

该代码最终起作用：

$(document).ready(function () {
    if ($("#fp_name10").val() !== "") {
        $('#fp11').show();
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    };

    if ($("#fp_name11").val() !== "") {
        $('#fp12').show();
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    };
});

键控功能工作正常。未发现任何问题是否要在加载页面时自动显示trs，而不使用keyup？@PrakashLaxkar是，它可以工作，但如果输入有值，它应该显示。第二个输入仅在第一个输入上进行键控时显示。@Teemu yes！如果输入有值，TR应该显示在pageload上。我认为两个元素足以说明您的问题。当代码尽可能短时，人们会更容易帮助您。“因为这会改变jQuery事件中的含义。”事实并非如此
onchange
这是一个坏主意，它也改变了代码的用途……On change是不好的。仅当我单击“离开”时，它才会显示新行。如果行具有php.No中的值，则不显示这些行。只有在我进行更改时，才会显示tr。如果它有一个值，我需要显示它。在onchange中，您可以检查该值。我更新了答案以包括onload处理程序。
$(this).val()

$("#fp_name0").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp1").slideDown();
    } else {
        $("#fp1").slideUp();
    }
});

$("#fp_name1").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp2").slideDown();
    } else {
        $("#fp2").slideUp();
    }
});

$("#fp_name2").on('change', function () {
    if ($(this).val() !== "") {
        $("#fp3").slideDown();
    } else {
        $("#fp3").slideUp();
    }
});

$(document).ready(function () {
    if ($("#fp_name10").val() !== "") {
        $('#fp11').show();
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name10").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp11").slideDown();
            } else {
                $("#fp11").slideUp();
                $("#fp12").slideUp();
                $("#fp_name11").val("");
                $("#fp_name12").val("");
            }
        });
    };

    if ($("#fp_name11").val() !== "") {
        $('#fp12').show();
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    } else {
        $("#fp_name11").keyup(function () {
            if ($(this).val() !== "") {
                $("#fp12").slideDown();
            } else {
                $("#fp12").slideUp();
                $("#fp_name12").val("");
            }
        });
    };
});