AJAX添加例子操作（不需要数据库）_ajax通过接口实现添加功能ajax实现添加功能必须要连接数据库吗-CSDN博客

本文链接：https://blog.csdn.net/rigger21/article/details/1645859

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="images/css.css" type="text/css" rel="stylesheet">
</head>
<script language="javascript" type="text/javascript">

    // 增加品牌函数
    function addSort() {
        var name = document.getElementById("add").value;
        if(name == "" ) {
            return;
        }

        var row = document.createElement("tr");
        row.setAttribute("id", name);
        var cell = document.createElement("td");
        cell.appendChild(document.createTextNode(name));
        row.appendChild(cell);

        var deleteButton = document.createElement("input");
        deleteButton.setAttribute("type", "button");
        deleteButton.setAttribute("value", "删除");
        deleteButton.onclick = function () { deleteSort(name); };
        cell = document.createElement("td");
        cell.appendChild(deleteButton);
        row.appendChild(cell);

        document.getElementById("sortList").appendChild(row);
    //清空输入框
        document.getElementById("add").value = "";
     }

    // 删除品牌函数
    function deleteSort(id) {
        if (id!=null){
            var rowToDelete = document.getElementById(id);
            var sortList = document.getElementById("sortList");
            sortList.removeChild(rowToDelete);
        }
    }

</script>

<table style="BORDER-COLLAPSE: collapse" bordercolor="#111111" cellspacing="0" cellpadding="2" width="400" bgcolor="#f5efe7" border="0">
    <tr>
        <td align="middle" height="4" colspan="3">
            <img height="4" src="images/promo_list_top.gif" width="100%" border="0" alt="">
        </td>
    </tr>
    <tr>
        <td align="middle" bgcolor="#dbc2b0" height="19" colspan="3">
            <b>品牌信息管理</b>
        </td>
    </tr>
    <tr>
        <td height="20">
            增加新品牌:
        </td>
        <td height="20">
            <input id="add" type="text" size="15">
        </td>
        <td height="20">
            <img src="images/ok.gif" οnclick="addSort();" alt="">
        </td>

    </tr>
    <tr>
        <td height="20">
            品牌信息管理:
        </td>

    </tr>
    <table border="1" width="400">
        <tr>
            <td height="20" valign="top" align="center">
                品牌名称:
            </td>
            <td id="pos_1" height="20">
                操作
            </td>
        </tr>
        <tbody id="sortList"></tbody>
    </table>
</table>