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显示表行如果输入有一个值。错误的键盘功能

回答

相关问题