在JavaScript中隐藏一个空的文本框

我想要这个函数removeRow()检查HTML文本框是否为空，如果是，请将其显示设置为'none'（隐藏它）。我也有这个function funcTest()它检查文本框是否填满，如果它是& &允许的最大行数没有被超过，那么它将显示设置为''（使其可见）。提前致谢。道歉，如果我没有输入正确的格式为StackOverflow的一切。我从来没有在这里问过这个问题。所有的帮助赞赏;我一直在盯着这个比我更愿意承认的时间。在JavaScript中隐藏一个空的文本框

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>

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

来源

2014-11-05 FrescoedEyelids

快速的问题，也许修辞，但：我们可以尝试JavaScript，*不是jQuery *，答案吗？另外，为什么？带有'id =“last_row”'的元素是隐藏的''。你为什么试图隐藏它？ – 2014-11-05 19:01:18

只需选中文本框的值的长度，和隐藏，如果它是空的：

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

jQuery的例子：

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

来源

2014-11-05 18:43:24 Growler

看来，如果你想要做这种方式等，没有jQuery的我会告诉你你的问题。您正在使用

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

这些值可以为空或为空，这可能是您为什么遇到问题。

请试试这个：而不是

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

，希望它为你工作

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

来源

2014-11-05 18:57:28

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

var r = myMAX_ROWS; 

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

既然你正在将r分配给myMAX_ROWS，并且您正在递减r，r wil l始终是< = myMAX_ROWS。您可能想要

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

此外，''不是'display'的有效CSS值。然而，'没有'是。您的显示设置更改为这样：

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

设置显示为“无”来隐藏它，将它设置为“inline-block的”或“块”，以显示它（取决于你的页面的布局）。 jQuery使用起来更容易：

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

来源

2014-11-05 19:00:09

在JavaScript中隐藏一个空的文本框

回答

相关问题