html動態接口table的增刪改除和上傳圖片（還有添加行刪除行）

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
   
</head>
<body>
<div class="padding">
    <div class="navInfo">
        <div class="addNew">
            <span>行業領域</span>
            <span class="addBtn" onclick="addIndustry()">添加</span>
        </div>
        <table class="dataList">
            <thead>
            <tr>
                <td>大標題</td>
                <td>背景圖</td>
                <td>行業名稱</td>
                <td>排序序號</td>
                <td>創建時間</td>
                <td>最後修改時間</td>
                <td>創建賬號</td>
                <td>最後修改賬號</td>
                <td>功能</td>
            </tr>
            </thead>
            <tbody id="listTable">

            </tbody>

        </table>

        <div class="addTable">
            <form class="form-horizontal" role="form">
                <input type="hidden" id="industryId" value="0">
                <div class="group">
                    <label>主標題*：</label>
                    <input type="text" id="navName"/>
                </div>
                <div class="group">
                    <label>行業*：</label>
                    <div>
                        <table style="width: 500px;">
                            <thead>
                            <tr>
                                <th>行業名稱</th>
                                <th>排序</th>
                                <th>鏈接</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody class="items">
                            <tr>
                                <td>
                                    <input type="text" name="title[]" style="width: 120px;">
                                </td>
                                <td>
                                    <input type="text" name="sortNum[]" style="width: 120px;">
                                </td>
                                <td>
                                    <input type="text" name="url[]" style="width: 120px;">
                                </td>
                                <td>
                                    <input type="button" value="刪除" style="width: 50px;"  onclick="delLine(this)">
                                </td>
                            </tr>
                            </tbody>
                        </table>
                        <br/>
                        <a href="#" onclick="addNewLine()">+添加一行</a>
                    </div>
                </div>
                <div class="group">
                    <label>語言選擇：</label>
                    <div class="dropdown">
                        <select class="form-control" id="languageChoose">
                            <option selected="selected">請選擇</option>
                            <option value="zh_CN">中文</option>
                            <option value="en_US">英文</option>
                        </select>
                    </div>
                </div>
                <div class="group">
                    <label>圖片*：</label>
                    <div class="formgroup">
                        <div class="mTop5">
                            <label title="" for="ClubImagesUpload" id="btnClubImg" class="addimg">
                                選擇圖片
                                <input type="file" accept="image/*" name="ClubImagesUpload" id="ClubImagesUpload"
                                       value="選擇圖片" class="hide" onchange="uploadImage()">

                            </label>
                        </div>
                        <div>圖片尺寸：1000*500</div>
                    </div>

                </div>
                <div class="group">
                    <label></label>
                    <div class="formgroup" id="preViewMore">
                        <div class="imgshow">

                        </div>
                        <input type="hidden" id="bgImage">
                    </div>
                </div>
                <div class="group">
                    <label></label>
                    <button type="button" class="btn btn-primary" onclick="saveIndustry()">確認</button>
                    &nbsp;&nbsp;&nbsp;
                    <button type="button" class="btn btn-default" onclick="cancelIndustry()">取消</button>
                </div>
            </form>
        </div>
    </div>
    <script>
        var csrftoken = document.head.querySelector('meta[name=_csrf]').content;

        $(document).ready(function () {
            getDataList();
        });

        function resetForm() {
            $('#industryId').val(0);
            $('#avName').val('');
            $('.imgshow').html('');
            $('#languageChoose').val('');

            $('.items').html('<tr>' +
                '<td>' +
                '<input type="text" name="title[]" style="width: 120px;">' +
                '</td>' +
                '<td>' +
                '<input type="number" min="0" name="sortNum[]" style="width: 120px;" value="0">' +
                '</td>' +
                '<td>' +
                '<input type="text" name="url[]" style="width: 120px;">' +
                '</td>' +
                '<td>' +
                '<input type="button" value="刪除" style="width: 50px;"  onclick="delLine(this)">' +
                '</td>' +
                '</tr>');
        }

        function addIndustry() {
            resetForm();
            $('.dataList').hide();
            $('.addTable').show();
        }

        function cancelIndustry() {
            $('.dataList').show();
            $('.addTable').hide();
        }

        function getDataList() {
            $.ajax({
                type: "GET",
                headers: {'X-CSRF-TOKEN': csrftoken},
                url: "",
                data: "",
                success: function (data) {
                    var list = data.list;

                    if (list == "" || list.length < 0 || list == undefined) {
                        $('#listTable').html('<td colspan="10" style="height:200px;text-align:center;color: #23527c">暫無相關數據...</td>');
                        return;
                    }

                    var tr = $('<tr></tr>');
                    var str = '';
                    for (var i = 0; i < list.length; i++) {
                        var data = list[i];
                        str = str + '<tr>';
                        str = str + '<td> ' + data.detail.title + ' </td>';
                        str = str + '<td> <img src="' + data.detail.bgImage + '" width="200"/>  </td>';
                        str = str + '<td> </td>';
                        str = str + '<td> </td>';
                        str = str + '<td> ' + data.detail.createdAt + ' </td>';
                        str = str + '<td> ' + data.detail.updatedAt + ' </td>';
                        str = str + '<td> ' + data.detail.creater + ' </td>';
                        str = str + '<td> ' + data.detail.updater + ' </td>';
                        str = str + '<td> ' +
                            ' <input type="button" name="" value="刪除" class="btn btn-danger" onclick="del((' + data.detail.id + '))" />' +
                            '<input type="button" name="" value="修改" class="btn btn-info" onclick="editIndustry(' + data.detail.id + ')" />'
                            + ' </td>';
                        str = str + '</tr>';

                        for (var j = 0; j < data.subList.length; j++) {
                            var subData = data.subList[j];
                            str = str + '<tr>';
                            str = str + '<td> </td>';
                            str = str + '<td> </td>';
                            str = str + '<td> ' + subData.title + ' </td>';
                            str = str + '<td> ' + subData.sortNum + ' </td>';
                            str = str + '<td> ' + subData.createdAt + ' </td>';
                            str = str + '<td> ' + subData.updatedAt + ' </td>';
                            str = str + '<td> ' + subData.creater + ' </td>';
                            str = str + '<td> ' + subData.updater + ' </td>';
                            str = str + '<td> ' +
                                ' <input type="button" name="" value="刪除" class="btn btn-danger" onclick="delSub((' + subData.id + '))" />'
                                + ' </td>';
                            str = str + '</tr>';

                        }

                    }

                    $('#listTable').html(str);

                },
                error: function () {
                    console.log("發生錯誤")
                    alert("發生錯誤");
                },
                complete: function () {
                    console.log("ajax請求完成")
                }
            })
        }

        function uploadImage() {
            var formData = new FormData();
            formData.append("file", $("#ClubImagesUpload")[0].files[0]);
            $.ajax({
                url: '', /*接口域名地址*/
                type: 'post',
                headers: {'X-CSRF-TOKEN': csrftoken},
                data: formData,
                contentType: false,
                processData: false,
                success: function (data) {
                    $('#bgImage').val(data.filePath);
                    $('.imgshow').html('<img src="' + data.filePath + '" />');

                }
            })
        }

        function addNewLine() {
            $('.items').append('<tr>' +
                '<td>' +
                '<input type="text" name="title[]" style="width: 120px;">' +
                '</td>' +
                '<td>' +
                '<input type="number" min="0" name="sortNum[]" style="width: 120px;" value="0">' +
                '</td>' +
                '<td>' +
                '<input type="text" name="url[]" style="width: 120px;">' +
                '</td>' +
                '<td>' +
                '<input type="button" value="刪除" style="width: 50px;" onclick="delLine(this)">' +
                '</td>' +
                '</tr>');
        }

        function delLine(obj) {
            console.log(obj);
            $(obj).parent().parent().remove();
        }

        function editIndustry(id) {
            $.ajax({
                type: "POST",
                url: "",
                headers: {'X-CSRF-TOKEN': csrftoken},
                data: {
                    id: id
                },
                success: function (data) {
                    $('#industryId').val(data.detail.id);
                    $('#navName').val(data.detail.title);
                    $('#languageChoose').val(data.detail.lang);
                    $('#bgImage').val(data.detail.bgImage);
                    if (data.detail.bgImage != '') {
                        $('.imgshow').html('<img src="' + data.detail.bgImage + '" />');
                    }

                    var html = '';
                    for (var i = 0; i < data.subList.length; i++) {
                        var item = data.subList[i];
                        html += '<tr>' +
                            '<td>' +
                            '<input type="text" name="title[]" style="width: 120px;" value="' + item.title + '">' +
                            '</td>' +
                            '<td>' +
                            '<input type="number" min="0" name="sortNum[]" style="width: 120px;"  value="' + item.sortNum + '">' +
                            '</td>' +
                            '<td>' +
                            '<input type="text" name="url[]" style="width: 120px;" value="' + item.url + '">' +
                            '</td>' +
                            '<td>' +
                            '<input type="button" value="刪除" style="width: 50px;" onclick="delLine(this)">' +
                            '</td>' +
                            '</tr>';
                    }

                    $('.items').html(html);

                    $('.dataList').hide();
                    $('.addTable').show();
                }
            })
        }

        function saveIndustry() {
            var industryId = $.trim($('#industryId').val());
            var title = $.trim($('#navName').val());
            var bgImage = $.trim($('#bgImage').val());
            var alanguageChoose = $.trim($('#languageChoose').val());

            var titles = $('input[name="title[]"]');
            var sortNums = $('input[name="sortNum[]"]');
            var urls = $('input[name="url[]"]');

            if (title.length < 1) {
                alert('請輸入主標題');
                return;
            }

            for (var i = 0; i < titles.length; i++) {
                var subTitle = $.trim($(titles[i]).val());
                var sortNum = parseInt($.trim($(sortNums[i]).val()));
                var url = $.trim($(urls[i]).val());

                if (subTitle.length < 1 && (isNaN(sortNum) || sortNum < 0) && url.length < 1) {
                    alert('行業信息請填寫完整');
                    return;
                }
            }

            if (alanguageChoose.length < 1) {
                alert('請選擇語言');
                return;
            }

            if (bgImage.length < 1) {
                alert('請選擇圖片');
                return;
            }


            $.ajax({
                type: "POST",
                url: "",
                headers: {'X-CSRF-TOKEN': csrftoken},
                data: {
                    id: industryId,
                    title: title,
                    bgImage: bgImage,
                    lang: alanguageChoose
                },

                success: function (data) {
                    var parentId = data.id;

                    for (var i = 0; i < titles.length; i++) {
                        var item = {
                            id: '',
                            parentId: parentId,
                            title: $.trim($(titles[i]).val()),
                            sortNum: parseInt($(sortNums[i]).val()),
                            url: $.trim($(urls[i]).val()),
                            lang: alanguageChoose
                        };

                        $.ajax({
                            type: "post",
                            url: "",
                            headers: {'X-CSRF-TOKEN': csrftoken},
                            data: item,
                            success: function (data) {

                            }
                        })
                    }

                    $('.dataList').show();
                    $('.addTable').hide();
                    getDataList();
                },
                error: function () {
                    console.log("發生錯誤")
                    alert("發生錯誤");
                },
                complete: function () {
                    console.log("ajax請求完成")
                }
            })
        }

        function del(id) {
            if (confirm("確認刪除？")) {
                $.ajax({
                    type: "POST",
                    url: "",
                    headers: {'X-CSRF-TOKEN': csrftoken},
                    data: {
                        id: id
                    },

                    success: function (data) {
                        alert("刪除成功");
                        getDataList();
                    }
                })
            }
        }

        function delSub(id) {
            if (confirm("確認刪除？")) {
                $.ajax({
                    type: "POST",
                    url: "",
                    headers: {'X-CSRF-TOKEN': csrftoken},
                    data: {
                        id: id
                    },

                    success: function (data) {
                        alert("刪除成功");
                        getDataList();
                    }
                })
            }
        }
    </script>
</body>
</html>
效果
html動態接口table的增刪改除和上傳圖片（還有添加行刪除行）

vue 動態添加刪除input

vue 字母或數字不會自動換行

微信小程序 swiper選項卡自適應高度

微信小程序 rich-text 改變圖片樣式

html動態接口table的增刪改除和上傳圖片（還有添加行刪除行）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結
