jQuery之添加删除记录

2021-01-21 12:15

阅读：573

标签：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>Nameth>
        th>Emailth>
        th>Salaryth>
        th> th>
    tr>
    tr>
        td>Tomtd>
        td>tom@tom.comtd>
        td>5000td>
        td>a href="deleteEmp?id=001">Deletea>td>
    tr>
    tr>
        td>Jerrytd>
        td>jerry@sohu.comtd>
        td>8000td>
        td>a href="deleteEmp?id=002">Deletea>td>
    tr>
    tr>
        td>Bobtd>
        td>bob@tom.comtd>
        td>10000td>
        td>a href="deleteEmp?id=003">Deletea>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>Nameth>
        th>Emailth>
        th>Salaryth>
        th> th>
    tr>
    tr>
        td>Tomtd>
        td>tom@tom.comtd>
        td>5000td>
        td>a href="deleteEmp?id=001">Deletea>td>
    tr>
    tr>
        td>Jerrytd>
        td>jerry@sohu.comtd>
        td>8000td>
        td>a href="deleteEmp?id=002">Deletea>td>
    tr>
    tr>
        td>Bobtd>
        td>bob@tom.comtd>
        td>10000td>
        td>a href="deleteEmp?id=003">Deletea>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();

             // 
//   Bob
             //   bob@tom.com
             //   10000
             //   Delete
             // 


            $(‘‘)
                .append(‘
‘+empName+‘
‘)
                .append(‘
‘+email+‘
‘)
                .append(‘
‘+salary+‘
‘)
                .append(‘‘+id+‘>Delete‘)
                .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

上一篇：jQuery之爱好选择

下一篇：模拟客户端上传数据

文章来自：搜素材网的编程语言模块，转载请注明文章出处。
文章标题：jQuery之添加删除记录
文章链接：http://soscw.com/index.php/essay/44989.html

亲，登录后才可以留言！

jQuery之添加删除记录

添加删除记录（原生）

添加删除记录（jQuery）

评论

热门文章

推荐文章

最新文章

置顶文章