2
안녕하세요, 일반적으로 작동하는 HTML 표에서 동적 필터를 만들려고하고 있지만 문자열에서 작은 따옴표를 옮길 수 없습니다. PHP에서 addslashes()를 시도해 보았습니다. regex replace) 자바 스크립트에서 아무것도 내가 필터 로직 이것은 전체 자바 스크립트 코드를 변경해야하는 경우 알고,하지만 난 문제가 selectField 변경 기능의 함수 내에서 생각하지 않습니다 ... 작동하지 않습니다 :javascript/php에서 작은 따옴표로 돌아 가기
여기$(document).ready(function(){
function addRemoveClass(theRows){
theRows.removeClass("odd even");
theRows.filter(":odd").addClass("odd");
theRows.filter(":even").addClass("even");
}
var selVal='';
var rows=$('#myTable tbody tr');
addRemoveClass(rows);
$("#selectField").on("change",function() {
$('table').show();
var selection = $(this).val();
var dataset = $('#myTable tbody').find('tr');
dataset.show();
// filter the rows that should be hidden
if(selection!="All"){
//selection=selection.replace(/'/g, '"');
selection = selection.replace(/'/g, "\\'");
if(selVal==="First_Name"){
dataset.filter(function(index, item) {
//return $(item).find('td:nth-child(1)').text().split(',').indexOf(selection) === -1;
return $(item).find('td:nth-child(1)').text().indexOf(selection) === -1;
}).hide();
} else if(selVal==="Surname"){
dataset.filter(function(index, item) {
return $(item).find('td:nth-child(2)').text().indexOf(selection)=== -1;
}).hide();
}
else if(selVal==="Address"){
dataset.filter(function(index, item) {
return $(item).find('td:nth-child(3)').text().indexOf(selection) === -1;
}).hide();
}else{
dataset.show();
}
} else{
dataset.show();
}
});
$("#selectCat").on("change",function(){
var e = document.getElementById("selectCat");
var strUser = e.options[e.selectedIndex].value;
selVal=strUser;
$("#selectField").empty();
//$("#mytBody tr").empty();
var selected = this.value;
if(selected !="NoCategory"){
$.post('process.php', {category:this.value}, function(data) {
data = $.parseJSON(data);
var al='All'
var options = "";
options += "<option value=All selected>All</option>";
$("#selectField").append(options);
options = "";
for (var i = 0; i < data.length; i++) {
//data[i] = data[i].replace(/'/g, "\\'");
options += "<option value='" + data[i] + "'>" + data[i] + "</option>";
//options += "<option value='" + data[i].toLowercase() + "'>" + data[i] + "</option>";
}
$("#selectField").append(options);
return false; //prevent from reloading the page
});
}else{
rows.show();
addRemoveClass(rows);
}
});
});
코드입니다 html 파일에서 :
<head>
<meta charset="UTF-8">
<script type="text/javascript" src="jquery-3.1.0.js"></script>
<script type="text/javascript" src="filter.js"></script>
<link rel="stylesheet" type="text/css" href="resultdiffversion.css" />
<link rel="stylesheet" type="text/php" href="process.php" />
<title> Import data </title>
</head>
<body>
</body>
<div class="optionDiv">
Filter by Category
<select id="selectCat">
<option value="NoCategory" selected>NoCategory</option>
<option value="First_Name">First_Name</option>
<option value="Surname">Surname</option>
<option value="Address">Address</option>
</select>
Filter by Selected Category
<select id="selectField">
<option value="All" selected>All</option>
</select>
</div>
<table id="myTable">
<thead>
<tr id=HeadRow><th>First_Name</th><th>Surname</th><th>Address</th><th>ID</th></tr>
</thead>
<!--
<tr id="HeadRow">
<th>ID</th>
<th>First_Name</th>
<th>Surname</th>
<th>Address</th>
</tr>
-->
<tbody>
<tr><td>Michael</td><td>O'Reilly</td><td>581 Beech Street, Lincoln, NE 68506</td><td>246</td></tr><tr><td>Della</td><td>Austin'</td><td>376 Washington Street, Pompano Beach, FL 33060</td><td>247</td></tr><tr><td>Hector</td><td>Hopkins</td><td>442 College Street, East Brunswick, NJ 08816</td><td>248</td></tr><tr><td>Terrance</td><td>Garza'</td><td>737 Route 1, Mahwah, NJ 07430</td><td>249</td></tr><tr><td>Melvin</td><td>Boyd'</td><td>525 Olive Street, Derby, KS 67037</td><td>250</td></tr><tr><td>Kimberly</td><td>Alvarez'</td><td>269 Olive Street, Redondo Beach, CA 90278</td><td>251</td></tr><tr><td>Eleanor</td><td>Steele'</td><td>447 Canal Street, Goose Creek, SC 29445 </td><td>252</td></tr><tr><td>Elsa</td><td>Osborne'</td><td>894 Pheasant Run, Pottstown, PA 19464</td><td>253</td></tr><tr><td>Cameron</td><td>Huff'</td><td>416 Parker Street, Riverdale, GA 30274</td><td>254</td></tr><tr><td>Essie</td><td>Ray'</td><td>539 Devon Court, Woodhaven, NY 11421</td><td>255</td></tr><tr><td>I'Am</td><td>TheBest</td><td>MyStreet 75</td><td>256</td></tr><tr><td>Bilbo</td><td>Baggins</td><td>Shire</td><td>257</td></tr><tr><td>Larry</td><td>I'Connol</td><td>Larrys's Street 45</td><td>258</td></tr><tr><td>Martin</td><td>O'Bannon</td><td>Martins's Street, 56</td><td>259</td></tr>
,627,552,314,960,453,210
나는 작은 따옴표로 이름을 필터링 할 때이 결과 
오라일리에 필터 이름에 작은 따옴표가 O "다음에 문자열을 잘라 때문에 이름이"O "를 시작으로 모두 소요 "그래서 1의 인덱스가 3 번 반환됩니다.
몇 함께 JQuery와 및 HTML을 제공하는 jsfiddle을 설정하십시오 여기
Demo
내가 데모에 사용 된 HTML입니다 타겟 및 비 타겟 로우. 'selVal'이 조건문에서 사용되기 전에 결코 선언되지 않기 때문에, 뭔가 잘못되었거나 당신의 제공된 코드에서 빠져 있습니다. 오류를 복제 할 수있는 코드를 질문에 제공하지 않으면 질문을 무시하고, downvoted 및/또는 닫을 수 있습니다. 우리가 당신을 도울 수 있도록 도와주세요. – mickmackusa간단한 버튼 만 포함 된 첫 번째 HTML 파일을 제외한 모든 코드를 추가했습니다. – Vlad67
Oh dear Lord no. 그 모든 PHP와 CSS를 제거하십시오. 문제의 복제를 허용하기 위해 최소한의 정보 만 제공해야합니다. 나는 소스 코드 html과 jquery 만보고 싶다. 괴상한 downvoters 오기 전에 귀하의 질문을 업데이 트하십시오. – mickmackusa