標記多個文本框值合併在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>