css 수정

 

{% extends "main.html" %}

{% block contents %}

<style>

    html,

    body,

    h1,

    h2,

    h3,

    div,

    span,

    a,

    button,

    table,

    tbody,

    thead,

    input {

        margin: 0;

        padding: 0;

        box-sizing: border-box;

    }

    html {

        background-color: hsl(0, 0%, 0%);

    }

    html,

    body {

        min-height: 110%;

    }

    .clicked {

        background-color: rgb(59, 62, 147);

        /* border-radius: 20%; */

        color: rgb(232, 132, 37);

        display: flex;

        text-align: start;

        flex-direction: column;

        width: 150px;

    }

    .clicked>ul>span {

        text-align: center;

    }

    .btn btn-warning {

        margin: 0;

        padding: 0;

    }

    ol,

    ul {

        padding: 4px 4px 4px 4px;

        /* margin: auto; */

    }

    /* .btn btn-secondary btn-lg {

        zoom: 0.5;

        margin: 0;

        padding: 0;

    } */

    .wrap {

        /* background-color: chartreuse; */

        width: 1600px;

        height: 850px;

        margin: auto;

        border: 1px;

    }

    td>input {

        border: none;

    }

    th>input {

        border: none;

    }

    tr {

        cursor: pointer;

    }

    td>button {

        zoom: 0.65;

    }

    .total {

        height: 800px;

    }

    table {

        width: 1550px;

        table-layout: fixed;

    }

    .flex-row {

        display: flex;

        flex-direction: row;

        align-items: flex-start

            /* justify-content: center; */

    }

    .flex-col {

        display: flex;

        flex-direction: column;

        align-items: center;

        justify-content: center;

    }

    .list-group {

        background-color: rgb(13, 170, 233);

        color: white;

        width: 200px;

    }

    .list-group >ul{

        height: 700px;

    }

    .list-group > ul>li{

        height: 30px;

    }

       

    .add-form>td {

        background-color: rgb(173, 214, 243);

    }

    .clicked{

        background-color: azure;

        color: blue;

        width: 180px;

        height: 150px;

    }

</style>

<script>

    let clicked;

    let idx;

    $(document).ready(() => {

        d_list()

        hideform()

    })

    function mv_click(id) {

        $(`#clicked> li`).removeClass('clicked')

        $(`#${id}`).addClass('clicked')

        $(`#add-from`).text(String(`${id}`))

        idx = String(id);

        console.log(idx)

        //         addcotnet(idx)

    }

    function list_click(list_id) {

        if (confirm("수정하시겠습니까?")) {

            $(`#${list_id}_add`).hide();

            $(`#${list_id}_mody`).show();

        }

    }

    function hideaddfrom(id) {

        $(`#${id}_add`).show();

        $(`#${id}_mody`).hide();

    }

    // 본선선택 필수 강제조항

    function addcotnet(idx) {

        // let mv_id = dix

        let msn = $('input[name=msn]').val()

        let hauju = $('input[name=hauju]').val()

        let offer = $('input[name =offer]').val()

        let p_name = $('input[name=p_name]').val()

        let gangjung = $('input[name=gangjung]').val()

        let size = $('input[name=size]').val()

        let bundle = $('input[name=bundle]').val()

        let mt = $('input[name=mt]').val()

        let storage = $('input[name=storage]').val()

        console.log(offer)

        let formData = new FormData()

        // formData.append("mv_id_give", mv_id)

        formData.append("msn_give", msn)

        formData.append("hauju_give", hauju)

        formData.append("offer_give", offer)

        formData.append("p_name_give", p_name)

        formData.append("gangjung_give", gangjung)

        formData.append("size_give", size)

        formData.append("bundle_give", bundle)

        formData.append("mt_give", mt)

        formData.append("storage_give", storage)

        fetch('/d_bar/post', { method: "POST", body: formData }).then(res => res.json()).then(data => {

            alert(data["msg"])

            window.location.reload()

        })

    }

    function showAddform() {

        $('#add-form').show();

    }

    function hideform() {

        $('#add-form').hide()

    }

    function d_list() {

        // let idx = idx

        // let url = `/d_bar/d_detail?data=${idx}`

        // console.log(url)

        fetch('/d_bar/d_detail').then(res => res.json()).then(data => {

            let rows = data['result'];

            // $(".list").empty()

            rows.forEach((row) => {

                let id = row['_id']

                let msn = row['msn']

                let hauju = row['hauju']

                let p_name = row['p_name']

                let offer = row['offer']

                let gangjung = row['gangjung']

                let size = row['size']

                let bundle = row['bundle']

                let mt = row['mt']

                let storage = row['storage']

                let temp_html = ` <tr id='${id}_add' onclick="list_click('${id}')">

                                        <td>${msn}</td>

                                        <td>${hauju}</td>

                                        <td>${p_name}</td>

                                        <td>${offer}</td>

                                        <td>${gangjung}</td>

                                        <td>${size}</td>

                                        <td>${bundle}</td>

                                        <td>${mt}</td>

                                        <td>${storage}</td>

                                    </tr>

                                   

                                    <tr id='${id}_mody'  style="display:none;">

                                        <td><input type="text" name="msn" value="${msn}"></td>

                                        <td><input type="text" placeholder="화주명" name="hauju" value="${hauju}"></td>

                                        <td><input type="text" placeholder="세부품명" value="d_bar" name="p_name" value='${p_name}'></td>

                                        <td><input type="text" placeholder="제강사" name="offer" value='${gangjung}'></td>

                                        <td><input type="text" placeholder="강 종" name="gangjung" value='${gangjung}'></td>

                                        <td><input type="text" placeholder="싸이즈" name="size" value='${size}'></td>

                                        <td><input type="text" placeholder="수 량" name="bundle" value="${bundle}"></td>

                                        <td><input type="text" placeholder="톤수" name="mt" value="${mt}"></td>

                                        <td><input type="text" placeholder="창고코드" name="storage" value='${storage}'>

                                        <td>

                                        <button onclick="hideaddfrom('${id}')" class="btn btn-warning">취소</button>    

                                        <button onclick="modifycotnet('${id}')" class="btn btn-warning">수정</button>

                                        <button onclick="deletecotnet('${id}')" class="btn btn-warning">삭제</button>

                                        </td>

                                    </tr>

                                `

                $("#list").append(temp_html)

                // if (dix == mv_id) {

                // }

            })

        })

    }

    function modifycotnet(id) {

        let msn = $(`#${id}_mody>td>input[name=msn]`).val()

        let hauju = $(`#${id}_mody>td>input[name=hauju]`).val()

        let offer = $(`#${id}_mody>td>input[name =offer]`).val()

        let p_name = $(`#${id}_mody>td>input[name=p_name]`).val()

        let gangjung = $(`#${id}_mody>td>input[name=gangjung]`).val()

        let size = $(`#${id}_mody>td>input[name=size]`).val()

        let bundle = $(`#${id}_mody>td>input[name=bundle]`).val()

        let mt = $(`#${id}_mody>td>input[name=mt]`).val()

        let storage = $(`#${id}_mody>td>input[name=storage]`).val()

        console.log(msn)

        let formData = new FormData()

        formData.append("id_give", id)

        formData.append("msn_give", msn)

        formData.append("hauju_give", hauju)

        formData.append("offer_give", offer)

        formData.append("p_name_give", p_name)

        formData.append("gangjung_give", gangjung)

        formData.append("size_give", size)

        formData.append("bundle_give", bundle)

        formData.append("mt_give", mt)

        formData.append("storage_give", storage)

        fetch('/d_bar/modify', { method: "POST", body: formData }).then(res => res.json()).then(data => {

            alert(data["msg"])

            window.location.reload()

        })

    }

    function deletecotnet(id) {

        if (confirm("정말삭제하나요?")) {

            let formData = new FormData()

            formData.append("id_give", id)

            fetch('/d_bar/delete', { method: "POST", body: formData }).then(res => res.json()).then(data => {

                alert(data["msg"])

                window.location.reload()

            })

        }

    }

</script>

<div class="flex-row">

    <div class="list-group">

        <ul id="clicked">

            {% for d_list in d_lists %}

            <li id="{{d_list._id}}" class="list-group" onclick="mv_click(`${id}` )">

                {{d_list.date}} {{d_list.mv_name}}

            </li>

            <hr />

            {% endfor %}

        </ul>

    </div>

    <div class="wrap">

        <table class="table" style="border: 8px blue;">

            <thead class="table-primary">

                <tr>

                    <!-- <th>모선명</th> -->

                    <th scope="col">MSN</th>

                    <th scope="col">화주명</th>

                    <th scope="col">품명</th>

                    <th scope="col">제강사</th>

                    <th scope="col">강종</th>

                    <th scope="col">싸이즈</th>

                    <th scope="col">총수량(B/D)</th>

                    <th scope="col">총중량(M/T)</th>

                    <th scope="col">창고코드</th>

                </tr>

            </thead>

            <tbody class="table table-striped table" id=list class="add-form">

                <tr class="add-form" id="add-form" style="background-color: aqua;">

                    <td><input type="text" placeholder="MSN" name="msn"></td>

                    <td><input type="text" placeholder="화주명" name="hauju"></td>

                    <td><input type="text" placeholder="세부품명" value="d_bar" name="p_name"></td>

                    <td><input type="text" placeholder="제강사" name="offer"></td>

                    <td><input type="text" placeholder="강 종" name="gangjung"></td>

                    <td><input type="text" placeholder="싸이즈" name="size"></td>

                    <td><input type="text" placeholder="수 량" name="bundle"></td>

                    <td><input type="text" placeholder="톤수" name="mt"></td>

                    <td><input type="text" placeholder="창고코드" name="storage"></td>

                    <td><button onclick="addcotnet()" class="btn btn-warning " style="padding: 20px;">저장</button></td>

                </tr>

            </tbody>

        </table>

        <div class="add-btn">

            <td><button onclick="showAddform()" class="btn btn-primary btn-lg">추가</button></td>

            <td><button onclick="hideform()" class="btn btn-secondary btn-lg">취소</button></td>

        </div>

    </div>

    {% endblock %}

</div>