如果输入有值，jquery 显示 table 行。错误的按键功能

Question

我有一些 table 行，里面有文本输入。每行都有一个唯一的名称 fp0,fp1,fp2,fp3... 输入从 php 数组获取值，但有时数组为空，没有值。如果输入有值，那么 TR 应该显示。

HTML:

<table>
    <tr>
        <td>This works fine<br>as long as has no default values set like a PHP variable</td>
    </tr>
    <tr id="fp0">
        <td>
            <label>INPUT0:</label>
            <input type="text" class="fp" name="fp_name0" id="fp_name0" value="">
            <td>
    </tr>
    <tr id="fp1">
        <td>
            <label>INPUT1:</label>
            <input type="text" class="fp" name="fp_name1" id="fp_name1" value="">
            <td>
    </tr>
    <tr id="fp2">
        <td>
            <label>INPUT2:</label>
            <input type="text" class="fp" name="fp_name2" id="fp_name2" value="">
            <td>
    </tr>
</table>
<br>
<br>
<table>
    <tr>
        <td>If it has a value it should display and +1 empty input on the bottom.<br>
            If you delete INPUT10 Then INPUT11 Should hide.<br>
        </td>
    </tr>
    <tr id="fp10">
        <td>
            <label>INPUT10:</label>
            <input type="text" class="fp" name="fp_name10" id="fp_name10" value="VALUE10">
            <td>
    </tr>
    <tr id="fp11">
        <td>
            <label>INPUT11:</label>
            <input type="text" class="fp" name="fp_name11" id="fp_name11" value="">
            <td>
    </tr>
    <tr id="fp12">
        <td>
            <label>INPUT12:</label>
            <input type="text" class="fp" name="fp_name12" id="fp_name12" value="">
            <td>
    </tr>
</table>

Javascript:

$(document).ready(function () {
/*AS LONG AS NO VALUE IS SET, EVERYTING WORKS FINE*/
if ($("#fp_name0").val() !== "") {
    $('#fp1').show();
} else {
    $("#fp_name0").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp1").slideDown();
        } else {
            $("#fp1").slideUp();
            $("#fp2").slideUp();
            $("#fp_name1").val("");
            $("#fp_name2").val("");
        }
    });
};
if ($("#fp_name1").val() !== "") {
    $('#fp2').show();
} else {
    $("#fp_name1").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp2").slideDown();
        } else {
            $("#fp2").slideUp();
            $("#fp_name2").val("");
        }
    });
};

/*THIS HAS VALUES AND HAS PROBLEMS*/

if ($("#fp_name10").val() !== "") {
    $('#fp11').show();
} 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();
} else {
    $("#fp_name11").keyup(function () {
        if ($(this).val() !== "") {
            $("#fp12").slideDown();
        } else {
            $("#fp12").slideUp();
            $("#fp_name12").val("");
            }
        });
    };
});

有点难以解释，但这里有一个 jsfiddle 的代码。

Answer 1

我想 onchange 就是您要找的。在此事件侦听器中放置代码以隐藏或显示元素。

如果您还想在加载元素时将可见性设置为正确的值，您也可以从 onload 调用相同的代码。可能需要将 onload 属性添加到输入（而不是使用 jQuery，具体取决于执行 jQuery 代码的时间）。

Answer 2

首先替换：

 this.value

和

$(this).val()

因为 this 在 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();
    }
});

Answer 3

这段代码终于成功了：

$(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("");
            }
        });
    };
});

如果输入有值，jquery 显示 table 行。错误的按键功能

jquery to show table row if input has a value. wrong keyup function

javascript

jquery

keyup