jquery顯示錶行如果輸入有一個值。錯誤的鍵盤功能

我有一些表格行裏面有文本輸入。每行都有一個唯一的名稱fp0，fp1，fp2，fp3 ... 輸入從php數組中獲取值，但有時該數組是空的，並且沒有值。如果輸入有一個值，那麼應該顯示TR。jquery顯示錶行如果輸入有一個值。錯誤的鍵盤功能

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。

來源

2015-09-04 Tibby

KEYUP功能工作正常。沒有發現任何問題 –

您是否希望在頁面加載時自動顯示trs，而無需鍵控？ – Teemu

@PrakashLaxkar是的，但如果輸入有值，它應該顯示。第二個輸入僅在第一個輸入時顯示。 – Tibby

此代碼工作最後：

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

來源

2015-09-05 11:02:23 Tibby

我認爲onchange是你在找什麼。放置代碼以隱藏或顯示此事件偵聽器中的元素。

如果您還想在元素加載時將可見性設置爲正確的值，那麼您也可以調用onload中的相同代碼。可能需要將onload屬性添加到輸入（而不是使用jQuery，具體取決於您的jQuery代碼何時執行）。

來源

2015-09-04 15:14:28 lex82

不會。如果我進行更改，它只會顯示tr。如果它有價值，我需要展示它。 – Tibby

在onchange，你可以檢查的價值。 – lex82

我更新了答案以包含onload處理函數。 – lex82

首先替換：

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

來源

2015-09-04 15:18:19 Adosi

「因爲這會改變jQuery事件中的含義。」不是這樣。 'onchange'這裏是一個壞主意，它也改變了代碼的用途... – Teemu

變化不好。它僅在我點擊時顯示新行。並不會顯示行，如果他們有來自php的值。 – Tibby

jquery顯示錶行如果輸入有一個值。錯誤的鍵盤功能

回答

相關問題