标记多个文本框值合并在while循环表中

Question

我需要一点帮助来解决我的问题。我有一个表与MySQL/PHP while循环。和两个文本框与像

<tbody> 
<?php while($row = mysqli_fetch_assoc($result)){ ?> 
<tr> 
<td><input name="telephone_number" type="text" value="<?php echo $row['telephone_number'];?>"/></td> 
<td><input name="priority" type="text" value="<?php echo $row['priority'];?>" /></td> 
<td>.....</td> 
<td>.....</td> 
</tr> 
<?php } ?> 
</tbody> 

查询值现在让我们说，如果电话号码val- 888和优先级val- 0干脆两者​​搭配其他行，然后用彩色类的所有匹配的行（TR）说class_matched。

到目前为止我可以用一个文本框与文本框的背景颜色与帮助的计算器。但不能找出两个文本框，并在tr中添加类。

$('#table1').find("input[name='telephone_number']").each(function() { 
if ($this.val().length > 1) { 
$(this).addClass('class_matched'); 
} 
}); 

在此先感谢您的帮助。真诚道歉，如果重复。

编辑：我也想实现两个文本框的变化事件。

Answer 1

这里我终于如何做了。它为我工作，我想要的。如果有人让它更好，我仍然会接受。感谢所有的stackoverflow。

here is my JSfiddle:

function find_match() { 
 
var allName = []; 
 

 
$('#table1 tbody tr').each(function(index1, value1) { 
 
    var tele_loop1 = $(this).find("input[name='telephone_number']").val(); 
 
    var priority_loop1 = $(this).find("input[name='priority']").val(); 
 
    var tel_p_loop1 = tele_loop1 +'-'+ priority_loop1; 
 
    allName.push(tel_p_loop1); 
 
}); 
 

 

 

 
$('#table1 tbody tr').each(function(index1, value1) { 
 
    var tele_loop2 = $(this).find("input[name='telephone_number']").val(); 
 
    var priority_loop2 = $(this).find("input[name='priority']").val(); 
 
    var tel_p_loop2 = tele_loop2 +'-'+ priority_loop2; 
 

 
var itemsFound = $.grep(allName, function (elem) { 
 
           return elem == tel_p_loop2; 
 
          }).length; \t \t \t \t \t \t  
 
    if(itemsFound > 1){ 
 
\t $(this).addClass('class_matched'); 
 
    }else{ 
 
\t $(this).removeClass(); 
 
    } 
 

 
}); 
 
}; 
 

 

 
$(document).ready(function() { 
 
     find_match(); 
 
      $('#table1 tbody tr').on('input', '.num_p', function() { 
 
      $(this).attr('value',this.value) 
 
     }); 
 
\t \t $('#table1 tbody tr').on('input', '.num_p',find_match); 
 
    });

.class_matched { 
 
background: #99FF32; 
 
} 
 

 
.sortable { 
 
font-family: 'Open Sans', sans-serif; 
 
    border-collapse: collapse; 
 
    border: 1px solid #38678f; 
 
    margin: 5px auto; 
 
    background: white; 
 
    animation: float 5s infinite; 
 
} 
 

 
.sortable th { 
 
    background: steelblue; 
 
    height: 35px; 
 
    font-weight: bold; 
 
    text-shadow: 0 1px 0 #38678f; 
 
    color: white; 
 
    border: 1px solid #38678f; 
 
    box-shadow: inset 0px 1px 2px #568ebd; 
 
    transition: all 0.2s; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="table1" class="sortable"> 
 
<thead> 
 
    <tr> 
 
    <th width="6%"> Number</th> 
 
    <th width="4%">Priority</th> 
 
    </tr> 
 
    </thead> 
 
    <tbody> 
 
    <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="111" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="222" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="333" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="111" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="222" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="444" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="111" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="1" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="333" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
     <tr> 
 
     <td><input class="num_p" name="telephone_number" type="text" value="333" /></td> 
 
     <td><input class="num_p" name="priority" type="text" value="2" /></td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Answer 2

1. 你需要两个循环
2. 商店外环VAL然后用第二循环
3. 添加类，如果用内循环相匹配

$('#table1 tr').each(function(i, e) { 
 
    var ot = $(this).find("input[name='telephone_number']").val(); 
 
    var op = $(this).find("input[name='priority']").val(); 
 
    var isMatched = false; 
 
    $('#table1 tr').each(function(j, k) { 
 
    if (j > i) { 
 
     var it = $(this).find("input[name='telephone_number']").val(); 
 
     var ip = $(this).find("input[name='priority']").val(); 
 
     if (it == ot && ip == op) { 
 
     $(this).addClass('class_matched'); 
 
     isMatched = true; 
 
     } 
 
    } 
 
    }); 
 
    if (isMatched) { 
 
    $(this).addClass('class_matched'); 
 
    } 
 
});

.class_matched { 
 
    background-color: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<table id="table1"> 
 
    <tbody> 
 
    <tr> 
 
     <td><input name="telephone_number" type="text" value="888" /></td> 
 
     <td><input name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="telephone_number" type="text" value="999" /></td> 
 
     <td><input name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
    <tr> 
 
     <td><input name="telephone_number" type="text" value="888" /></td> 
 
     <td><input name="priority" type="text" value="0" /></td> 
 
    </tr> 
 
    </tbody> 
 
</table>