テーブル表示[高機能版]

テーブルで検索フォームを表示します。

ほとんどのホームページで、レイアウト崩れを起こさずに表示できます。

<script>
(function($){
    function dispLoading(){
        if($("#loading").size() == 0){
            $(".searchresult").append("<div id='loading'>検索中...</div>");
        }
    }
    function removeLoading(){
        $("#loading").remove();
    }

    $(document).on("submit", ".ajaxsearch", function() {
        $(".searchresult").text("");
        dispLoading();
        var request = $.ajax({
            url: "https://www.seminar-portal.org/index.php/seminarsearch",
            type: "get",
            dataType: 'jsonp',
            jsonpCallback: "seminar",
            data: $(this).serialize(),
            timeout: 5000,
        });
        request.done(function(result, textStatus, xhr) {
            if (result.num >=1) {
                // sort by date asc
                result.items.sort(function(a,b) {
                    return (a.date < b.date ? -1 : 1);
                });

            $.each(result.items, function(i, val) {
                textdata = $("<a></a>",{
                    href: val.url,
                    text: val.title
                });
                textlist = $("<p></p>").html(textdata).append("<br>会場: " + val.place + "<br>講師: " + val.mentor + "<br>日時: " + val.date + val.time);
                $('.searchresult').append(textlist);
            });
            } else {
                $('.searchresult').text("合致するセミナーはありません。");
            }
            removeLoading();

        });
        request.fail(function(xhr, textStatus, error) {
            $(".searchresult").text("接続できませんでした。しばらく待ってから、検索を実行してください。");
            removeLoading();
        });
        return false;
    });
})(jQuery);
</script>
<style>
.ajaxformtable {
 width: 300px;
 min-height: 80px;
 padding:5px;
 margin: 0 auto 5px auto;
 background-color: #ccddcc;
 border-radius: 6px;
}
.ajaxformtable th {
 text-align: center;
}
.ajaxformtable td {
 margin: 5px;
 vertical-align: top;
}
.ajaxformtable input {
 height: 30;
}
</style>
<form action="" method="get" class="ajaxsearch">
<table class="ajaxformtable">
<tr>
  <th colspan="2">
  <a href="https://www.seminar-portal.org/">名古屋セミナーポータル検索</a>
  </th>
</tr>
<tr>
    <td>
        タイトル
    </td>
    <td>
        <input type="text" name="keyword" class="text" placeholder="" value=""><!-- デフォルトの検索キーワードを設定する => value="検索キーワード" -->
    </td>
</tr>
<tr>
    <td>
        会場
    </td>
    <td>
        <input type="text" name="place" class="text" placeholder="" value=""><!-- デフォルトの会場を設定する => value="会場名" -->
    </td>
</tr>
<tr>
    <td>
        講師名
    </td>
    <td>
        <input type="text" name="name" class="text" placeholder="" value=""><!-- デフォルトの講師名を設定する => value="講師名" -->
    </td>
</tr>
<tr>
        <td>
        </td>
<td>
<input value="検索" type="submit" class="btn">
</td>
</tr>
<tr>
  <td colspan="2">
<div class="searchresult"></div>
  </td>
</tr>
</table>
</form>

<script
  src="https://code.jquery.com/jquery-1.12.4.min.js"
  integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ="
  crossorigin="anonymous"></script>

サンプルページ

テーブル表示のサンプル検索ページはこちらをごらんください。