jQuery之添加删除记录

时间：2020-07-13 15:39:11 阅读：71 评论：0 收藏：0 [点我收藏+]

标签：inpu now() 目标 NPU utf-8 default oct table fir

添加删除记录（原生）

示例：

/*style.css*/
@CHARSET "UTF-8";
#total {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}

ul {
    list-style-type: none;
}

li {
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float: left;
}

.inner {
    width: 400px;
    border-style: solid;
    border-width: 1px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#employeeTable {
    border-spacing: 1px;
    background-color: black;
    margin: 80px auto 10px auto;
}

th,td {
    background-color: white;
}

#formDiv {
    width: 250px;
    border-style: solid;
    border-width: 1px;
    margin: 50px auto 10px auto;
    padding: 10px;
}

#formDiv input {
    width: 100%;
}

.word {
    width: 40px;
}

.inp {
    width: 200px;
}
#employeeTable, #employeeTable th, #employeeTable td{
    border: 1px solid;
    border-spacing: 0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加删除记录（原生）</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name: </td>
            <td class="inp">
                <input type="text" name="empName" id="empName" />
            </td>
        </tr>
        <tr>
            <td class="word">email: </td>
            <td class="inp">
                <input type="text" name="email" id="email" />
            </td>
        </tr>
        <tr>
            <td class="word">salary: </td>
            <td class="inp">
                <input type="text" name="salary" id="salary" />
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript">
    /*
     * 功能说明：
     * 1.点击‘Submit‘，根据输入的信息在表单中生成一行员工信息
     * 2.点击Delete链接，提示删除当前行信息，点击确定后删除信息
     * 技术要点：
     * 1.DOM查询
     * 2.绑定事件监听
     * 3.DOM增删改
     * 4.取消事件的默认行为
     */
    function removeTr(){
        var trNode = this.parentNode.parentNode;
        var tds = trNode.getElementsByTagName("td");
        var nameStr = tds[0].firstChild.nodeValue;
        var flag = confirm("真的要删除" + nameStr + "的信息吗？");
        if(flag){
            trNode.parentNode.removeChild(trNode);
        }
        return false;
    }

    window.onload = function(){
        //目标1：点击Delete删除记录
        var aEles = document.getElementsByTagName("a");
        for(var i = 0;i < aEles.length;i++){
            aEles[i].onclick = removeTr;
        }
        //目标2：点击Submit增加记录
        var subBtn = document.getElementById("addEmpButton");
        subBtn.onclick = function(){
            var nameText = trim(document.getElementById("empName").value);
            var emailText = trim(document.getElementById("email").value);
            var salaryText = trim(document.getElementById("salary").value);

            document.getElementById("empName").value = nameText;
            document.getElementById("email").value = emailText;
            document.getElementById("salary").value = salaryText;

            if(nameText == "" || emailText == "" || salaryText == ""){
                alert("您输入的内容不完整");
                return ;
            }

            //组装节点
            var nameTd = document.createElement("td");
            nameTd.appendChild(document.createTextNode(nameText));
            var emailTd = document.createElement("td");
            emailTd.appendChild(document.createTextNode(emailText));
            var salaryTd = document.createElement("td");
            salaryTd.appendChild(document.createTextNode(salaryText));
            var aTd = document.createElement("td");
            var aNewEle = document.createElement("a");
            aNewEle.href = "deleteEmp?id=XXX";
            aNewEle.appendChild(document.createTextNode("Delete"));
            aNewEle.onclick = removeTr;
            aTd.appendChild(aNewEle);

            var trNode = document.createElement("tr");
            trNode.appendChild(nameTd);
            trNode.appendChild(emailTd);
            trNode.appendChild(salaryTd);
            trNode.appendChild(aTd);

            var empTable = document.getElementById("employeeTable");
            empTable.appendChild(trNode);
        }

        function trim(str){
            var reg = /^\s*|\s*$/g;
            return str.replace(reg,"");
        }
    }
</script>
</body>
</html>

添加删除记录（jQuery）

示例：

/*style.css*/
@CHARSET "UTF-8";
#total {
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}

ul {
    list-style-type: none;
}

li {
    border-style: solid;
    border-width: 1px;
    padding: 5px;
    margin: 5px;
    background-color: #99ff99;
    float: left;
}

.inner {
    width: 400px;
    border-style: solid;
    border-width: 1px;
    margin: 10px;
    padding: 10px;
    float: left;
}

#employeeTable {
    border-spacing: 1px;
    background-color: black;
    margin: 80px auto 10px auto;
}

th,td {
    background-color: white;
}

#formDiv {
    width: 250px;
    border-style: solid;
    border-width: 1px;
    margin: 50px auto 10px auto;
    padding: 10px;
}

#formDiv input {
    width: 100%;
}

.word {
    width: 40px;
}

.inp {
    width: 200px;
}
#employeeTable, #employeeTable th, #employeeTable td{
    border: 1px solid;
    border-spacing: 0;

}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>添加删除记录（jQuery）</title>
    <link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>

<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>&nbsp;</th>
    </tr>
    <tr>
        <td>Tom</td>
        <td>tom@tom.com</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Jerry</td>
        <td>jerry@sohu.com</td>
        <td>8000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>bob@tom.com</td>
        <td>10000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>

<div id="formDiv">
    <h4>添加新员工</h4>
    <table>
        <tr>
            <td class="word">name:</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email:</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary:</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>

<script type="text/javascript" src="../js/jquery.min.js"></script>
<script type="text/javascript">
    /*
     * 功能说明：
     * 1.点击‘Submit‘，根据输入的信息在表单中生成一行员工信息
     * 2.点击Delete链接，提示删除当前行信息，点击确定后删除信息
     * 技术要点：
     * 1.DOM查询
     * 2.绑定事件监听
     * 3.DOM增删改
     * 4.取消事件的默认行为
     */
    $(function () {
        $(‘#addEmpButton‘).click(function () {
            var $empName = $(‘#empName‘);
            var $email = $(‘#email‘);
            var $salary = $(‘#salary‘);

            var empName = $empName.val();
            var email = $empName.val();
            var salary = $empName.val();
            var id = Date.now();

             // <tr>
             //   <td>Bob</td>
             //   <td>bob@tom.com</td>
             //   <td>10000</td>
             //   <td><a href="deleteEmp?id=003">Delete</a></td>
             // </tr>

            $(‘<tr></tr>‘)
                .append(‘<td>‘+empName+‘</td>‘)
                .append(‘<td>‘+email+‘</td>‘)
                .append(‘<td>‘+salary+‘</td>‘)
                .append(‘<td><a href="deleteEmp?id="‘+id+‘>Delete</a></td>‘)
                .appendTo(‘#employeeTable‘)
                .find(‘a‘)
                .click(clickA);

            $empName.val(‘‘);
            $email.val(‘‘);
            $salary.val(‘‘);

        })

        $(‘a‘).click(clickA);

        function clickA (event) {
            event.preventDefault();
            var $tr = $(this).parent().parent();
            var name = $tr.children(‘td:first‘).html();
            if(confirm(‘确定删除‘+name+‘吗?‘)) {
                $tr.remove();
            }
        }
    })
</script>
</body>
</html>

jQuery之添加删除记录

标签：inpu now() 目标 NPU utf-8 default oct table fir

原文地址：https://www.cnblogs.com/hfl1996/p/13293332.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行