소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경
본문
소스에 있는 input 으로 입력받는 값을 그룹화 하여 select 항목 변경 하고 싶습니다.
고수님들의 조언 좀 부탁 드립니다.
※ 도 | 시군 | 동명 | 분류1| 현재 input 키워드로 입력 받는 값을 그룹화 하여 select 항목으로 변경
input 키워드 -> select 박스 그룹화
<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="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">
<style type="text/css" class="init">
thead input {
width: 100%;
}
</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="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// 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 + '" />');
// 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="http://www.datatables.net/rss.xml">
<link rel="stylesheet" type="text/css" href="/media/css/site-examples.css?_=94461d89946ef749b7a43d14685c725d1">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.11.3/css/jquery.dataTables.min.css">
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/fixedheader/3.2.0/css/fixedHeader.dataTables.min.css">
<style type="text/css" class="init">
thead input {
width: 100%;
}
</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="https://code.jquery.com/jquery-3.5.1.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/1.11.3/js/jquery.dataTables.min.js"></script>
<script type="text/javascript" language="javascript" src="https://cdn.datatables.net/fixedheader/3.2.0/js/dataTables.fixedHeader.min.js"></script>
<script type="text/javascript" language="javascript" src="../../../../examples/resources/demo.js"></script>
<script type="text/javascript" class="init">
$(document).ready(function () {
// Setup - add a text input to each footer cell
$('#example thead tr')
.clone(true)
.addClass('filters')
.appendTo('#example thead');
var table = $('#example').DataTable({
orderCellsTop: true,
fixedHeader: true,
initComplete: function () {
var api = this.api();
// 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 + '" />');
// 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();
// Get the search value
$(this).attr('title', $(this).val());
var regexr = '({search})'; //$(this).parents('th').find('select').val();
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();
$(this)
.focus()[0]
.setSelectionRange(cursorPosition, cursorPosition);
});
});
},
});
});
</script>
</head>
<table class="display"String id="example"String style="width: 100%;"String>
<thead>
<tr>
<th>도</th>
<th>시군</th>
<th>동명</th>
<th>마트명</th>
<th>과일종류</th>
<th>비용</th>
</tr>
</thead>
<tbody>
<tr>
<td>서울</td>
<td>서초구</td>
<td>서초1동</td>
<td>싸다마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>서초구</td>
<td>서초2동</td>
<td>빠른마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>동작구</td>
<td>동작2동</td>
<td>빠른마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
<tr>
<td>서울</td>
<td>동작구</td>
<td>동작1동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통2동</td>
<td>빠른마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>싸다마트</td>
<td>사과</td>
<td>1000</td>
</tr>
<tr>
<td>경기도</td>
<td>수원시</td>
<td>영통1동</td>
<td>싸다마트</td>
<td>바나나</td>
<td>1000</td>
</tr>
</table>
답변 3
글 내용만으로 정확히 원하는 것이 어떤 것인지 잘 이해가 안됩니다.
그래서 비슷한 것을 찾아 봤는데, 답은 아닌것 같지만,
도움이 될수도 있을 것 같아서...
자체 해결 했습니다. 감사합니다.
자체 해결 했습니다. 감사합니다.
답변을 작성하시기 전에 로그인 해주세요.
