|
 |
|
สอบถามการค้นหาข้อมูลในตารางด้วย 2select box และอยากเพิ่ม textbox เข้ามา ต้องทำอย่างไรครับ |
|
 |
|
|
 |
 |
|
Code (JavaScript)
$(document).ready(function() {
$("#Position,#Section,#textID").on("change", function() {
var Position = $('#Position').find("option:selected").val();
var Section = $('#Section').find("option:selected").val();
var Word = $('#textID').val();
SearchData(Position, Section, Word)
});
});
function SearchData(Position, Section, Word) {
if (Position.toUpperCase() == 'ALL' && Section.toUpperCase() == 'ALL' && Word == '') {
$('#TableEmployee tbody tr').show();
} else {
$('#TableEmployee tbody tr:has(td)').each(function() {
var rowPosition = $.trim($(this).find('td:eq(3)').text());
var rowSection = $.trim($(this).find('td:eq(4)').text());
var rowWord = $.trim($(this).find('td:eq(5)').text());
if (Position.toUpperCase() != 'ALL' && Section.toUpperCase() != 'ALL' && Word != '') {
if (rowPosition.toUpperCase() == Position.toUpperCase() && rowSection == Section && rowWord == Word) {
$(this).show();
} else {
$(this).hide();
}
} else if ($(this).find('td:eq(3)').text() != '' || $(this).find('td:eq(4)').text() != '' || $(this).find('td:eq(5)').text() != '') {
if (Position != 'all') {
if (rowPosition.toUpperCase() == Position.toUpperCase()) {
$(this).show();
} else {
$(this).hide();
}
}
if (Section != 'all') {
if (rowSection == Section) {
$(this).show();
} else {
$(this).hide();
}
}
if (Word != '') {
if (rowWord == Word) {
$(this).show();
} else {
$(this).hide();
}
}
}
});
}
}
1. คงตรรกะตามการออกแบบเดิม
2. จริงๆ ใน else if ควรนำค่าจาก user input (select box, textbox) มาสร้างเงื่อนไขไม่ใช่ตารางแสดงข้อมูล
3. onchange event สำหรับ textbox จะทำงานเมื่อ lost focus
ลองนำไปประยุกต์ดูครับ
|
 |
 |
 |
 |
Date :
2021-01-09 20:35:26 |
By :
lakornworld |
|
 |
 |
 |
 |
|
|
 |
 |
|
 |
 |
|
|
|

|
Load balance : Server 01
|