[英]show/hide input when input value is empty(jquery, javascript)
I want to hide the column when there is no value of <input>
in <td>
like the picture.当
<td>
中没有<input>
的值时,我想隐藏该列,如图所示。
No.1 in the photo is the initial table.照片中的No.1是初始表。
No.2 in the photo is a table that hides the th
column of 3,5.照片中的 No.2 是隐藏
th
列的表格。
NO.3 in the photo is a table that hides the th
column of 5.照片中的NO.3是一个隐藏
th
5列的表格。
I want the columns 3 and 5 to be hidden as in 2, but the 3 with <input>
is not hidden.我希望第 3 列和第 5 列像第 2 列一样被隐藏,但是带有
<input>
的第 3 列没有被隐藏。
HTML HTML
<table class="table_10 myTable" border="1" >
<colgroup>
<col style="width :10%"/>
<col />
<col />
<col />
<col />
<col />
<col />
<col />
<col />
</colgroup>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
<th>5</th>
<th>6</th>
<th>7</th>
</tr>
<tr>
<td>11</td>
<td>22</td>
<td>
<input class="control" value="" />
</td>
<td>44</td>
<td></td>
<td>66</td>
<td>77</td>
</tr>
</table>
Js/jquery js/jquery
// 5 Hidden
function colDelete() {
$('.myTable th').each(function (i) {
var remove = 0;
var cds = $(this).parents('table').find('tr td:nth-child(' + (i + 1) + ')')
cds.each(function (j) { if (this.innerHTML == '') remove++; });
if (remove == ($('.myTable tr').length - 1)) {
$(this).hide();
cds.hide();
}
});
}
// 3 Hidden
function abcd() {
$('.control').keyup(function () {
// If value is not empty
if ($(this).val().length < 1) {
// Hide the element
$('.myTable > tr > th').hide();
$('.myTable > tr > td').hide();
} else {
// Otherwise show it
$('.myTable > tr > th').show();
$('.myTable > tr > td').show();
}
}).keyup(); // Trigger the keyup event, thus running the handler on page load
}
As far as I understand is that you want to hide column 3 and 5 from the table when there is no value in them and column 3 have the text box in it.据我了解,当第 3 列和第 5 列中没有值并且第 3 列中有文本框时,您想从表中隐藏它们。 I have examined your code and you need to change your code a little bit.
我已经检查了您的代码,您需要稍微更改一下代码。
// 3 Hidden $(function(){ // this will be called when the DOM is ready $('.control').keyup(function () { var tdIndex = $(this).parent().index(); if ($(this).val().length < 1) { // Hide the element $(this).hide(); $('.myTable tr th').eq(tdIndex).hide(); $('.myTable tr td').eq(tdIndex).hide(); } else { // Otherwise show it $(this).show(); $('.myTable tr th').eq(tdIndex).show(); $('.myTable tr td').eq(tdIndex).show(); } }); });
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.