소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경 채택완료
너유
3년 전
조회 2,228
소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경 하고 싶습니다.
고수님들의 조언 좀 부탁 드립니다.
※ 도 | 시군 | 동명 | 분류1| 현재 input 키워드로 입력 받는 값을 그룹화 하여 select 항목으로 변경
input 키워드 -> select 박스 그룹화
</p>
<p><head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Column filtering</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<a href="http://www.datatables.net/rss.xml">" target="_blank" rel="noopener noreferrer">http://www.datatables.net/rss.xml"></a>
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"></a>
<link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css"></a>
<style type="text/css" class="init">
thead input {
width: 100%;
}</p>
<p> </style>
<script type="text/javascript" src="/media/js/site.js?_=0c32e5cdbe9b575086edb0b907646184"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=extensions%2Ffixedheader%2Fexamples%2Foptions%2FcolumnFiltering.html" async></script>
<script type="text/javascript" language="javascript" src="<a href="https://code.jquery.com/jquery-3.5.1.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.5.1.js"></script></a>
<script type="text/javascript" language="javascript" src="<a href="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script></a>
<script type="text/javascript" language="javascript" src="<a href="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script></a>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
</p>
<p>$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');</p>
<p> var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();</p>
<p> // For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');</p>
<p> // On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>DataTables example - Column filtering</title>
<link rel="shortcut icon" type="image/png" href="/media/images/favicon.png">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="<a href="http://www.datatables.net/rss.xml">" target="_blank" rel="noopener noreferrer">http://www.datatables.net/rss.xml"></a>
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css"></a>
<link rel="stylesheet" type="text/css" href="<a href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css"></a>
<style type="text/css" class="init">
thead input {
width: 100%;
}</p>
<p> </style>
<script type="text/javascript" src="/media/js/site.js?_=0c32e5cdbe9b575086edb0b907646184"></script>
<script type="text/javascript" src="/media/js/dynamic.php?comments-page=extensions%2Ffixedheader%2Fexamples%2Foptions%2FcolumnFiltering.html" async></script>
<script type="text/javascript" language="javascript" src="<a href="https://code.jquery.com/jquery-3.5.1.js"></script>" target="_blank" rel="noopener noreferrer">https://code.jquery.com/jquery-3.5.1.js"></script></a>
<script type="text/javascript" language="javascript" src="<a href="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script></a>
<script type="text/javascript" language="javascript" src="<a href="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>" target="_blank" rel="noopener noreferrer">https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script></a>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
</p>
<p>$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');</p>
<p> var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();</p>
<p> // For each column
api
.columns()
.eq(0)
.each(function (colIdx) {
// Set the header cell to contain the input element
var cell = $('.filters th').eq(
$(api.column(colIdx).header()).index()
);
var title = $(cell).text();
$(cell).html('<input type="text" placeholder="' + title + '" />');</p>
<p> // On every keypress in this input
$(
'input',
$('.filters th').eq($(api.column(colIdx).header()).index())
)
.off('keyup change')
.on('keyup change', function (e) {
e.stopPropagation();</p>
<p> // Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();</p>
<p> var cursorPosition = this.selectionStart;
// Search the column for that value
api
.column(colIdx)
.search(
this.value != ''
? regexr.replace('{search}', '(((' + this.value + ')))')
: '',
this.value != '',
this.value == ''
)
.draw();</p>
<p> $(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});</p>
<p> </script>
</head></p>
<p><table class="display"String id="example"String style="width: 100%;"String></p>
<p> <thead></p>
<p> <tr></p>
<p> <th>도</th></p>
<p> <th>시군</th></p>
<p> <th>동명</th></p>
<p> <th>마트명</th></p>
<p> <th>과일종류</th></p>
<p> <th>비용</th></p>
<p> </tr></p>
<p> </thead></p>
<p> <tbody></p>
<p> <tr></p>
<p> <td>서울</td></p>
<p> <td>서초구</td></p>
<p> <td>서초1동</td></p>
<p> <td>싸다마트</td></p>
<p> <td>바나나</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p> <tr></p>
<p>
<td>서울</td></p>
<p> <td>서초구</td></p>
<p> <td>서초2동</td></p>
<p> <td>빠른마트</td></p>
<p> <td>바나나</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p> <tr></p>
<p>
<td>서울</td></p>
<p> <td>동작구</td></p>
<p> <td>동작2동</td></p>
<p> <td>빠른마트</td></p>
<p> <td>바나나</td></p>
<p> <td>1000</td>
</tr></p>
<p> <tr></p>
<p>
<td>서울</td></p>
<p> <td>동작구</td></p>
<p> <td>동작1동</td></p>
<p> <td>빠른마트</td></p>
<p> <td>사과</td></p>
<p> <td>1000</td>
</tr></p>
<p> <tr></p>
<p> <td>경기도</td></p>
<p> <td>수원시</td></p>
<p> <td>영통1동</td></p>
<p> <td>빠른마트</td></p>
<p> <td>사과</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p>
<tr></p>
<p> <td>경기도</td></p>
<p> <td>수원시</td></p>
<p> <td>영통2동</td></p>
<p> <td>빠른마트</td></p>
<p> <td>사과</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td>경기도</td></p>
<p> <td>수원시</td></p>
<p> <td>영통1동</td></p>
<p> <td>싸다마트</td></p>
<p> <td>사과</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p> <tr></p>
<p> <td>경기도</td></p>
<p> <td>수원시</td></p>
<p> <td>영통1동</td></p>
<p> <td>싸다마트</td></p>
<p> <td>바나나</td></p>
<p> <td>1000</td></p>
<p> </tr></p>
<p>
</table></p>
<p>
댓글을 작성하려면 로그인이 필요합니다.
답변 3개
채택된 답변
+20 포인트
3년 전
글 내용만으로 정확히 원하는 것이 어떤 것인지 잘 이해가 안됩니다.
그래서 비슷한 것을 찾아 봤는데, 답은 아닌것 같지만,
도움이 될수도 있을 것 같아서...
로그인 후 평가할 수 있습니다
댓글을 작성하려면 로그인이 필요합니다.
답변을 작성하려면 로그인이 필요합니다.
로그인