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

Question

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

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。

Answer 1

此代碼工作最後：

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

Answer 2

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

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

Answer 3

首先替換：

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