JQuery登錄檔單

HTML程式碼

<form>
    <table cellpadding="0px" cellspacing="0px">
        <tr>
            <td>商品新增</td>
            <td></td>
        </tr>
        <tr>
            <td>所屬類別</td>
            <td>
                <select>
                    <option>小說</option>
                    <option>文學</option>
                    <option>新聞</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>圖書名稱</td>
            <td>
                <input type="text" id="bookName"/>
                <span class="required"></span>
            </td>
        </tr>
        <tr>
            <td>作者</td>
            <td>
                <input type="text" id="bookAuthor"/>
                <span id="showAuthor"></span>
            </td>
        </tr>
        <tr>
            <td>出版社</td>
            <td>
                <input type="text" id="publish"/>
                <span id="showPublish"></span>
            </td>
        </tr>
        <tr>
            <td>市場價格</td>
            <td>
                <input type="text" id="marketPrice"/>
                <span id="showMarketPrice"></span>
            </td>
        </tr>
        <tr>
            <td>熱賣價</td>
            <td>
                <input type="text" id="hotPrice"/>
                <span id="showHotPrice"></span>
            </td>
        </tr>
        <tr>
            <td>影像</td>
            <td>
                <select>
                    <option>123</option>
                    <option>456</option>
                    <option>789</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>是否為推薦</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>是否為熱門</td>
            <td><input type="checkbox"/></td>
        </tr>
        <tr>
            <td>簡單描述</td>
            <td>
                <textarea cols="23px" rows="5px">
                </textarea>
            </td>
        </tr>
    </table>
    <input type="button" id="add" value="新增"/>
</form>

JQuery程式碼

<script>
    $("#add").click(function () {
        var show = $("table input:lt(5)");
        var isNull = false;
        for (var i = 0; i < show.length; i++) {
            if (show.eq(i).val() == "") {
                $("td>span").text("*").css("color", "red");
                isNull = false;
            } else {
                $("td>span").text(" ").css("color", "white");
                isNull = true;
            }
        }
        if (isNull) {
            alert("提交成功")
        }    
        })
</script>

CSS程式碼

<style>
  #add {
            width: 80px;
            height: 30px;
            background-color: grey;
            border: 1px dotted white;
            border-radius: 5px;
            align-self: center;
        }
 </style>

效果圖

執行結果

執行失敗

執行成功