在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中隱藏一個空的文本框

回答

相關問題