Simple Html Table

Simple Html Table

by Mani Deep

HTML

<div class="addProductDiv" id="addProductDiv" style="border: 2px solid #3366A9;margin-bottom: 10px;">
    <!-- <h5>Add New Products to Store/Sell.</h5> -->	<span id="closeProductButton" type="button" onclick=hideProductDiv()>X</span>

    <div class="addProductFields" style="padding: 3px;">
        <table class="addProductTable">
            <tr>
                <td style="width:96%">
                    <table class="prodFields" style="width:100%;">
                        <tr>
                            <td colspan="2"><b>Name of Product</b></td>
                            <td><b>Product Category</b></td>
                            <td><b>Image</b></td>
                        </tr>
                        <tr>
                            <td colspan="2">
                                <input type="text" name="inpName" id="inpCode" value="" required="true" class="" /></td>
                            <td>
                                <select style="width:100%" id="category">
                                    <option value="mob">Mobile</option>
                                    <option value="tab">Tablet</option>
                                    <option value="Laptop">Laptop</option>
                                </select>
                            </td>
                            <td><input type='file' id="imgInp" value="Select Image" /></td>
                        </tr>
                        <tr>
                            <td colspan="2"><b>Describe your Item</b></td>
                            <td><b>Type</b></td>
                            <td rowspan="5"><img style="max-height:100px" id="prodImage" src="" alt="" /></td>
                        </tr>
                        <tr>
                            <td colspan="2" rowspan="7">
                                <input style="height:100%" type="text" name="inpCode" id="inpCode" value="" required="true" class="" />
                            </td>
                           ...

CSS

.addProductTable td {
    padding: 2px;
    /* width:98%; */
}
#closeProductButton {
    float:right;
    display:inline-block;
    padding:2px 5px;
    background:#ccc;
}

JavaScript

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();

        reader.onload = function (e) {
            $('#prodImage').attr('src', e.target.result);
        }

        reader.readAsDataURL(input.files[0]);
    }
}

$("#imgInp").change(function () {
    readURL(this);
});