在JavaScript中隐藏一个空文本框

Hide an empty textbox in JavaScript

本文关键字：一个 文本 JavaScript 隐藏      更新时间：2023-09-26

我希望函数removeRow()检查HTML文本框是否为空，如果为空，则将其显示设置为"none"（隐藏它）。我还有这个function funcTest()，它检查文本框是否已填充，以及是否为&amp；未超过允许的最大行数，则将显示设置为"（使其可见）。提前谢谢。如果我没有以正确的格式为StackOverflow输入所有内容，我深表歉意。我以前从来没有问过这个问题。感谢所有的帮助；我盯着这个看的时间比我愿意承认的要长。

HTML

<table width="650" border="0" cellpadding="2" cellspacing="2" class="table_border">
            <tr class="blacktext9">
                <td>
                    <table align="center">
                        <button id="testbutton" name="testbutton" onclick="funcTest();return false;">Test</button>
                        <button id="testbuttonRemove" name="testbuttonRemove" onclick="removeRow()">Remove empty rows</button>
                        <input type="hidden" id="last_row" name="last_row" value=1 />
                        <tr id="rowToDisplay1" >
                            <td>
                                ID:
                                <input id="testId1" name="testId1" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay2" style="display: none">
                            <td>
                                ID:
                                <input id="testId2" name="testId2" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay3" style="display: none">
                            <td>
                                ID:
                                <input id="testId3" name="testId3" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay4" style="display: none">
                            <td>
                                ID:
                                <input id="testId4" name="testId4" type="text" />
                            </td>
                        </tr>
                        <tr id="rowToDisplay5" style="display: none">
                            <td>
                                ID:
                                <input id="testId5" name="testId5" type="text" />
                            </td>
                        </tr>
                    </table>
                </td>
            </tr>
        </table>

JS

function removeRow() {
     var r = myMAX_ROWS;
     for (r; r <= myMAX_ROWS; r--) {
        if ((document.getElementById('testId' + r).value == '') && (document.getElementById('rowToDisplay' + r).style.display = '')) {
            document.getElementById('rowToDisplay' + r).style.display = 'none';
        }
    }  
} 
function funcTest () {
    var LASTROW = document.getElementById('last_row').value;
    //myMAXROWS currently set to 3
    if(LASTROW < myMAX_ROWS && document.getElementById('testId' + LASTROW).value != '')  {
        LASTROW++;  
        document.getElementById('rowToDisplay'+LASTROW).style.display = '';
        document.getElementById('last_row').value = LASTROW;
    }

只需检查文本框值的长度，如果为空则隐藏：

（不过，不确定你为什么要这样做，因为如果隐藏的话，你将无法访问隐藏的文本框来添加输入）

jQuery示例：

    $("#textBox").on("keydown", function () {
        if ($(this).val().length <= 0) {
            $(this).hide();
        }
        else {
            log("TEXTBOX IS NOT EMPTY");
            $(this).show();
        }
    });

看起来，如果你想这样做，并且没有jQuery，我会向你展示你的问题。您正在使用

.value == ''
.style.display = ''

这些值可以为null或为空，这可能就是您遇到问题的原因。

请尝试这个：

.value.length < 1
.style.display.length < 1

相反，希望它对你有效

我已经创建了一个Fiddle（单击此行）供您查看

首先，您有一个无限循环，这里是：

 var r = myMAX_ROWS;
 for (r; r <= myMAX_ROWS; r--) {

由于您将r分配给myMAX_ROWS，并且您正在递减r，因此r将始终<=myMAX_ROWS。你可能想要

 var r = myMAX_ROWS;
 for (r; r >= 0; r--) {

此外，"不是"display"的有效CSS值。但是，"none"是。将您的显示设置更改为：

document.getElementById('rowToDisplay'+LASTROW).style.display = 'none';

将display设置为"none"以隐藏它，将其设置为"inline block"或"block"以显示它（取决于页面的布局）。使用jQuery:，这要容易得多

$("#elementID").show();
$("#elementID").hide();
相关文章：