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 id="showName"></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="添加"/>

JavaScript代码

    $("#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("提交成功")
    } else {
        alert("请完善信息")
    }
})

CSS代码

    table, td {
        border: 1px solid black;
    }
    #add {
        width: 80px;
        height: 30px;
        background-color: grey;
        border: 1px dotted white;
        border-radius: 5px;
        align-self: center;
    }

相关效果图