Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
                <div class="home">
        <div class="container-fluid">
            <div class="row">

                <div id="m_tabs">
                <form id="form1" role="form">
                    <div class="mlist rwdtable-4" id="rwdtable-2">
                        <table class="table table-striped" id="tab_logic2">
                            <thead>
                                <tr>
                                    <th>統一編號</th>
                                    <th>發票抬頭</th>
                                    <th>地址</th>
                                    <th>編輯</th>
                                </tr>
                            </thead>
                            <tbody data-bind="foreach: invoiceSettings">
                                <tr>
                                    <td  data-th="統一編號">
                                        <label for="Unumbers"
                                            data-bind="text: unifiedNumber"></label>
                                        <input type="text" name="Unumbers"
                                            class="form-control Unumbers validate[custom[taxId],funcCall[chkUnumbers]]"
                                            placeholder="統一編號" data-bind="value: unifiedNumber"
                                            maxlength="8" readonly="">
                                    </td>
                                    <td  data-th="發票抬頭">
                                        <label for="Invoice"
                                            data-bind="text: title"></label>
                                        <input type="text" name="Invoice"
                                            class="form-control Invoice validate[funcCall[chkInvoice]]"
                                            placeholder="發票抬頭" data-bind="value: title"
                                            maxlength="15" readonly="">
                                    </td>
                                    <td class="addr_container"  data-th="地址">
                                        <label for="zone1"></label>
                                        <select name="zone1"
                                            class="form-control zone1 validate[required]"
                                            data-role="county" readonly=""
                                            data-errormessage-value-missing="請輸入寄送地址欄位!">
                                            <option value="">縣市</option>
                                            <option value="基隆市">基隆市</option>
                                            <option value="台北市">台北市</option>
                                            <option value="新北市">新北市</option>
                                            <option value="宜蘭縣">宜蘭縣</option>
                                            <option value="新竹市">新竹市</option>
                                            <option value="新竹縣">新竹縣</option>
                                            <option value="桃園縣">桃園縣</option>
                                            <option value="苗栗縣">苗栗縣</option>
                                            <option value="台中市">台中市</option>
                                            <option value="彰化縣">彰化縣</option>
                                            <option value="南投縣">南投縣</option>
                                            <option value="嘉義市">嘉義市</option>
                                            <option value="嘉義縣">嘉義縣</option>
                                            <option value="雲林縣">雲林縣</option>
                                            <option value="台南市">台南市</option>
                                            <option value="高雄市">高雄市</option>
                                            <option value="屏東縣">屏東縣</option>
                                            <option value="台東縣">台東縣</option>
                                            <option value="花蓮縣">花蓮縣</option>
                                        </select>
                                        <label for="zone2"></label>
                                        <select name="zone2"
                                            class="form-control zone2 validate[required]"
                                            data-role="district" readonly=""
                                            data-errormessage-value-missing="請輸入寄送地址欄位!">
                                            <option value="中區">中區 400</option>
                                            <option value="東區">東區 401</option>
                                            <option value="南區">南區 402</option>
                                            <option value="西區">西區 403</option>
                                            <option value="北區">北區 404</option>
                                            <option value="北屯區">北屯區 406</option>
                                            <option value="西屯區">西屯區 407</option>
                                            <option value="南屯區">南屯區 408</option>
                                            <option value="太平區">太平區 411</option>
                                            <option value="大里區">大里區 412</option>
                                            <option value="霧峰區">霧峰區 413</option>
                                            <option value="烏日區">烏日區 414</option>
                                            <option value="豐原區">豐原區 420</option>
                                            <option value="后里區">后里區 421</option>
                                            <option value="石岡區">石岡區 422</option>
                                            <option value="東勢區">東勢區 423</option>
                                            <option value="和平區">和平區 424</option>
                                            <option value="新社區">新社區 426</option>
                                            <option value="潭子區">潭子區 427</option>
                                            <option value="大雅區">大雅區 428</option>
                                            <option value="神岡區">神岡區 429</option>
                                            <option value="大肚區">大肚區 432</option>
                                            <option value="沙鹿區">沙鹿區 433</option>
                                            <option value="龍井區">龍井區 434</option>
                                            <option value="梧棲區">梧棲區 435</option>
                                            <option value="清水區">清水區 436</option>
                                            <option value="大甲區">大甲區 437</option>
                                            <option value="外埔區">外埔區 438</option>
                                            <option value="大安區">大安區 439</option>
                                        </select>
                                        <input name="zipcode" type="text" data-role="zipcode"
                                            data-bind="value: zipcode" readonly=""
                                            style="display: none;">
                                        <label for="addr"
                                            data-bind="text: street"></label>
                                        <input type="text" name="addr"
                                            class="form-control addr validate[funcCall[chkaddr]]"
                                            placeholder="地址" data-bind="value: street"
                                            maxlength="100" readonly="">
                                        <span data-bind="updateLabels: something"></span>
                                    </td>
                                    <td  data-th="編輯">
                                        <div class="delete"
                                            data-bind="click: $root._removeinvoiceSettings">
                                        </div>
                                        <div class="modify" data-bind="showRow: something">
                                        </div>
                                    </td>
                                </tr>
                            </tbody>
                            <tbody data-bind="if: invoiceSettings().length === 0"></tbody>
                        </table>

                    </div>
                    <div class="addnew" data-bind="click: _addNumber"><span><i></i>新增</span>
                    </div>
                    <button type="button" class="btn btn-primary"
                        data-bind="click: _save">儲存</button>
                    <button type="button" class="btn btn-default tablink cancel">取消</button>
                </form>
                </div>
            </div>
        </div>
    </div>
            
          
!
            
              #rwdtable-2 #tab_logic2 {
    overflow: hidden;
}
/*
#rwdtable-2 #tab_logic2 tr:nth-of-type(2) {
    display: none;
}*/

#rwdtable-2 #tab_logic2 .pic span.title {
    display: inline-block;
    width: 100px;
    height: 40px;
    font-size: smaller;
}

#rwdtable-2 #tab_logic2 th,
#rwdtable-2 #tab_logic2 td {
    margin: 0;
    padding: 0;
    font-family: 微軟正黑體;
    border: 0;
    border-bottom: 1px #e8e2e2 solid;
}

#rwdtable-2 #tab_logic2 {
    min-width: 100%;
}

#rwdtable-2 #tab_logic2 th {
    display: none !important;
}

#rwdtable-2 #tab_logic2 td {
    display: block;
}

#rwdtable-2 #tab_logic2 td:before {
    content: attr(data-th) " ";
    font-weight: bold;
    width: 36%;
    display: inline-block;
    height: 40px;
    padding: 10px;
    text-align: right;
    background: #bdf5ff;
   /* text-align-last: justify;*/
    border-right: 1px #e8e2e2 solid;
    margin: 0 5px 0 0;
}

#rwdtable-2 #tab_logic2 td:nth-child(4) label {
    display: inline-block;
    width: 120px;
}

#rwdtable-2 #tab_logic2 td:nth-child(4):before {
    height: 65px;

}
#rwdtable-2 #tab_logic2 tr:nth-child(2) td/*:before*/ {
    display: none;
}

#rwdtable-2 #tab_logic2 .pic .image {
    float: none;
    vertical-align: -35px;
    margin: 0 0 0 5px;
}

#rwdtable-2 #tab_logic2 .order {
    display: inline-block;
    line-height: 35px;
    font-size: 15px;
}

#rwdtable-2 #tab_logic2 .order.ask i {
    background-position: -114px -1386px;
}

#rwdtable-2 #tab_logic2 .order.record i {
    background-position: -113px -1429px;
}

#rwdtable-2 #tab_logic2 .order i {
    padding: 0 10px;
}

#rwdtable-2 #tab_logic2 .process {
    width: 100%;
    margin: 0 0 4px;
    position: relative;
}

#rwdtable-2 #tab_logic2 .process span {
    width: 100%;
}

        
#rwdtable-2.rwdtable-4 #tab_logic2 td:before{
    content: attr(data-th) " ";
    font-weight: bold;
    width: 36%;
    display: inline-block;
    height: 40px;
    padding: 10px;
    text-align: right;
    background: #bdf5ff;
   /* text-align-last: justify;*/
    border-right: 1px #e8e2e2 solid;
    margin: 0 5px 0 0;
   }
#rwdtable-2.rwdtable-4 #tab_logic2 td {
    position: relative;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) label ,#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) input ,#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) select {
    position: absolute;
}
#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) label:nth-child(1),#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3)  select:nth-child(2) {
    top: 10%;
}
#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) label:nth-child(3){
    top: 10%;
    right: 20%;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) select:nth-child(4) {
    top: 10%;
    right: 12%;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) label:nth-child(6){
    top: 50%;
}
#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(3) input{
    top: 55%;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(4) div{
    position: absolute;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(4) div:nth-child(1){
    right: 40%;
    top: 25%;
}

#rwdtable-2.rwdtable-4 #tab_logic2 td:nth-child(4) div:nth-child(2){
    right: 20%;
    top: 25%;
}

#rwdtable-2 #tab_logic2 td:nth-child(3):before {
    height: 60px;
    padding-top: 20px;
}

#rwdtable-2 #tab_logic2 td:nth-child(4):before {
    height: 40px;
}

            
          
!
            
              
        function CAM007() {
            var self = this;

            self.invoiceSettings = ko.observableArray([{
                    id: 303,
                    unifiedNumber: '61',
                    title: '456456465',
                    zipcode: '100',
                    street: '1234564897',
                    edit: false,
                },
                                                       {
                    id: 303,
                    unifiedNumber: '62',
                    title: '456456465',
                    zipcode: '100',
                    street: '1234564897',
                    edit: false,
                },
                                                       {
                    id: 303,
                    unifiedNumber: '63',
                    title: '456456465',
                    zipcode: '100',
                    street: '1234564897',
                    edit: false,
                },
            
                
            ]);

            self._addNumber = function () {
                if (self.invoiceSettings().length < 10) {
                    self.invoiceSettings.push({
                        id: null,
                        unifiedNumber: '',
                        title: '',
                        zipcode: '',
                        street: '',
                        edit: true,
                    });
                } else {
                    DialogMessageError('最多10筆!');
                }
            }

            self._removeinvoiceSettings = function (w) {
                ConfirmDialog("確認刪除此筆紀錄?", function (status) {
                    if (status) {

                        self.invoiceSettings.remove(w);
                    }
                }, "請確認");
            }

            self._save = function () {
                if (!$(form1).validationEngine('validate')) {
                    return;
                }

                var invoiceSettings = self.invoiceSettings();

                //將縣市、鄉鎮市區加入至街道前面形成完整住址
                for (var i = 0; i < invoiceSettings.length; i++) {
                    var theRow = $("#tab_logic2 tbody tr:eq(" + i.toString() + ")");
                    var country = theRow.find("select[name='zone1'] ").val();
                    var district = theRow.find("select[name='zone2'] ").val();
                    invoiceSettings[i].street = country + district + invoiceSettings[i].street;
                }

                var success = function () {
                    DialogMessageSuccess('統編紀錄本更新成功!', UpdateSuccess);
                };

                var error = function (data) {
                    DialogMessageError(data.message);
                }

                $.postJSON('#', {
                    invoiceSettings: invoiceSettings
                }, success, error);
            }
        }

        function UpdateSuccess() {
            window.location.href = "#";
        }

        var vm = new CAM007();
        ko.bindingHandlers.updateLabels = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                if (bindingContext.$data.edit === false) {
                    var container = $(element).closest('td');
                    container.twzipcode();

                    var county = container.find('select.zone1 option:selected').text();
                    container.find('label[for="zone1"]').text(county);

                    var district = container.find('select.zone2 option:selected').text();
                    container.find('label[for="zone2"]').text(district);
                }
            }
        };
        ko.bindingHandlers.showRow = {
            init: function (element, valueAccessor, allBindings, viewModel, bindingContext) {
                if (bindingContext.$data.edit === true) {
                    var tr = $(element).closest("tr");

                    tr.find('td.addr_container').twzipcode();
                    tr.find("select.form-control").attr("readonly", false);
                    tr.find("input.form-control").prop("readonly", false);
                    tr.find("label").hide();

                    $(element).hide();
                }
            }
        };
        ko.applyBindings(vm);
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console