Question

我有一些表格行，里面有文字输入。每一行都有一个唯一的名称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

这段代码终于成功了：

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

Answer 3

首先替换：

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

如果输入有值，则jquery显示表行。错误的键盘功能

3 个答案: