Language
Login
Language Setting
X
English
日本語 [Japanese]
about this App
須坂市役所 貸出し物品・備品一覧
useful
2
Loading...
window.onload = function () { var keyword = getParameterFromURL("subject"); // obtain keyword from the URL "?subject=" var count = 0; // number of subjects whose URI matches keyword var datas = new Array(); var org = $('#bihin'); // 検索 $('#search').click(function(){ showTable($('#key').val()); }); $('#key').keypress( function ( e ) { if ( e.which == 13 ) { showTable($('#key').val()); return false; } }); function showTable(key) { count = 0; $("#resultCount").empty(); $('#bihin').replaceWith(org.clone()); var tableRow = ''; var newDatas; if(key != "") { newDatas = datas.filter(function(item, index){ if ((item.name).indexOf(key) >= 0) return true; }); }else{ newDatas = datas; } for(var num in newDatas) { var data = newDatas[num]; tableRow = '<tr id="rc">' // 行の内容を生成 tableRow += '<td>' + data['name'] + '</td>'; tableRow += '<td>' + data['quantity'] + '</td>'; tableRow += '<td>' + data['use'] + '</td>'; tableRow += '<td class=\"conditions\">' + data['conditions'] + '</td>'; tableRow += '<td>' + data['department'] + data['engagement'] + '</td>'; tableRow += '<td><a href="tel:' + data['telephone_number'] + '">' + data['telephone_number'] + '</a></td>'; tableRow += '<td>' + (data['remarks'] ? data['remarks'] : ' ') + '</td>'; tableRow += '</tr>'; $('#bihin tr:last').after(tableRow); ++count; } if (count > 0) { $("#resultCount").append(count + " 件のデータを表示しています。"); } }; // Work loop $.each(LinkData.getWorks(), function (workKey, workValue) { // File loop $.each(LinkData.getFiles(workValue), function (fileKey, fileValue) { // Subject loop $.each(LinkData.getSubjects(workValue, fileValue), function (subjKey, subjValue) { var data = {}; $.each(LinkData.getTriplesBySubject(workValue, fileValue, subjValue), function (tripleKey, tripleValue) { var prop = tripleValue.property; var obj = tripleValue.object; var propertyName = getLastName(prop); data[propertyName] = obj; }); datas.push(data); }); }); }); showTable(""); }; // Get a parameter value in URL (e.g. ?paramString=value ) function getParameterFromURL(paramString) { var value = ""; var topWindow = top.window.location.search; if (topWindow) { var q = decodeURIComponent(topWindow.substring(1, topWindow.length)).split("&"); for (var i = 0; i < q.length; i++) { var r = q[i].split("="); if (r[0] == paramString) value = r[1]; } } return value; } // Highlight keyword in the string function highlight(string, keyword) { if (keyword.length > 0) { var ss = string.split(keyword); var len = ss.length; if (len > 1) { string = ss[0]; for (i = 1; i < len; i++) string += "<span class=\"highlight\">" + keyword + "</span>" + ss[i]; } } return string; } // get the last name of the string separated with # and / function getLastName(string) { string = decodeURIComponent(string); var sharp = string.split("#"); var slash = sharp[sharp.length - 1].split("/"); var lastName = slash[slash.length - 1]; return lastName; }
span.highlight {color: red;} span.propertyName {color: gray;} span.subject { color: blue; } span.object{ color: black; } body { background: white; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; padding: 1em 2em 4em; } a, a span { text-decoration: underline; } a:hover, a span:hover { text-decoration: none; } .name {} .quantity {} .use {200px;} .conditions { width: 300px; } .department {} .tel { width: 150px; } .remarks {} /* -------------------------------------------------- coder Table -------------------------------------------------- */ .coder { width: 1200px; table-layout: fixed; border-spacing: 0; border: 1px solid #CCC; -webkit-border-radius: 6px; -moz-border-radius: 6px; -o-border-radius: 6px; border-radius: 6px; box-shadow: 0 1px 1px #CCC; } .coder th, .coder td { padding:10px; background:#FFF; border-bottom:solid 1px #CCC; border-right:solid 1px #CCC; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; word-break: break-all; } .coder td a { text-decoration: none; } .coder th { background:#e3dcd5; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.8) inset; color: black; } /* ----------------------- 左上角丸 最初の行の最初のセル ----------------------- */ .coder tr:first-child th:first-child, .coder tr:first-child td:first-child { -webkit-border-radius: 6px 0 0 0; -moz-border-radius: 6px 0 0 0; -o-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } /* ----------------------- 右上角丸 最初の行の最後のセル ----------------------- */ .coder tr:first-child th:last-child, .coder tr:first-child td:last-child { -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; -o-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } /* ----------------------- 左下角丸 最後の行の最初のセル ----------------------- */ .coder tr:last-child th:first-child, .coder tr:last-child td:first-child { -webkit-border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -o-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } /* ----------------------- 右下角丸 最後の行の最後のセル ----------------------- */ .coder tr:last-child th:last-child, .coder tr:last-child td:last-child { -webkit-border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -o-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; } /* -------------------------------------------- thaed,tbodyを使う場合の設定 -------------------------------------------- */ .coder thead th {background:#e3dcd5;} .coder thead+tbody th {background:#f4ede6;} .coder tbody th {text-align:left;}/*IE*/ /* ----------------------- 左上角丸 thead内 最初の行の最初のセル ----------------------- */ .coder thead tr:first-child th:first-child, .coder thead tr:first-child td:first-child { -webkit-border-radius: 6px 0 0 0; -moz-border-radius: 6px 0 0 0; -o-border-radius: 6px 0 0 0; border-radius: 6px 0 0 0; } /* ----------------------- 右上角丸 thead内 最初の行の最後のセル ----------------------- */ .coder thead tr:first-child th:last-child, .coder thead tr:first-child td:last-child { -webkit-border-radius: 0 6px 0 0; -moz-border-radius: 0 6px 0 0; -o-border-radius: 0 6px 0 0; border-radius: 0 6px 0 0; } /* ----------------------- 角丸なし thaedの後のtbody 最初の行の最初のセル 角丸なし thaedの後のtbody 最初の行の最後のセル ----------------------- */ .coder thead+tbody tr:first-child th:first-child, .coder thead+tbody tr:first-child td:first-child, .coder thead+tbody tr:first-child th:last-child, .coder thead+tbody tr:first-child td:last-child { -webkit-border-radius:0px; -moz-border-radius:0px; -o-border-radius:0px; border-radius:0px; } /* ----------------------- 左下角丸 thaedの後のtbody 最後の行の最初のセル ----------------------- */ .coder thead+tbody tr:last-child th:first-child, .coder thead+tbody tr:last-child td:first-child { -webkit-border-radius: 0 0 0 6px; -moz-border-radius: 0 0 0 6px; -o-border-radius: 0 0 0 6px; border-radius: 0 0 0 6px; } /* ----------------------- 右下角丸 thaedの後のtbody 最後の行の最後のセル ----------------------- */ .coder thead+tbody tr:last-child th:last-child, .coder thead+tbody tr:last-child td:last-child { -webkit-border-radius: 0 0 6px 0; -moz-border-radius: 0 0 6px 0; -o-border-radius: 0 0 6px 0; border-radius: 0 0 6px 0; }
<h1>須坂市役所 貸出し物品・備品一覧</h1> <span class="searchBox"> 物品名で検索: <input id="key" type="text" name="myext"/> <img id="search" class="searchImage" src="http://app.linkdata.org/asset/95f23270.png"/> </span> <p id="resultCount"></p> <table class="coder" id="bihin"> <tr> <th class="name">物品名</th> <th class="quantity">個数</th> <th class="use">用途</th> <th class="conditions">条件・手続き</th> <th class="department">担当</th> <th class="tel">電話番号</th> <th class="remarks">備考</th> </tr> </table>
Preview
Input Data
ReadMe
Snapshots
LinkData Work
Table Data
須坂市役所 貸出し物品・備品一覧
Contributor:長野県須坂市
Update:Oct 5, 2020
848 Downloads, 1 Applications
有効活用と市民サービスの向上のため、市民の皆さんが利用できる物品・備品の一覧です。 2020/10/05 情報を更新
suzaka_bihin
Add LinkData work(LinkData)
Link http://app.linkdata.org/run/app1s1440i?tab=readme
jquery-1.11.2.min.js
Work
Add
Clear
insert work id or work name.