Question

我希望此函数removeRow()检查HTML文本框是否为空，如果是，则将其显示设置为“none”（隐藏它）。我也有function funcTest()检查文本框是否已填满，以及是否为＆amp;＆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;
    }

Answer 1

只需检查文本框值的长度，并隐藏它是否为空：

（虽然，不知道你为什么要这样做，因为如果它被隐藏，你将无法访问隐藏文本框以首先添加输入）

jQuery示例：

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

Answer 2

看起来如果你想这样做，没有jQuery，我会告诉你你的问题。您正在使用

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

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

请试试这个：

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

相反，希望它适合你

I've created a Fiddle (click this line) for you to see

Answer 3

首先，你有一个无限循环，在这里：

 var r = myMAX_ROWS;

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

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

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

此外，＆＃39;＆＃39;不是＆＃39; display＆＃39;的有效CSS值。但是，没有＆＃39;没有＆＃39;是。将显示设置更改为：

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

将显示设为＆＃39;无＆＃39;隐藏它，将其设置为“内联块”＆＃39;或者＆＃39;阻止＆＃39;显示它（取决于您的页面布局）。使用jQuery会更容易：

$("#elementID").show();
$("#elementID").hide();

在JavaScript中隐藏空文本框

3 个答案: