table数据增删改查

Html

Css

 td {
	text-align:center;
}

//对象数组
var list = [];

//学生
function Student(no, name, age) {
    this.no = no;
    this.name = name;
    this.age = age;
}

function $(id) {
    return document.getElementById(id);
}

//随机值
function randomNum(obj) {
    var num = Math.floor(1 + Math.random() * 100);
    obj.value = num;
}

// 添加/修改学生信息
function addLast(obj) {

var no = $("no").value;
    var name = $("name").value;
    var age = $("age").value;
    var stu = new Student(no, name, age);

if (obj.value == "登记") {
        list.push(stu);
    } else {

list.forEach(function(item, idx) {
            if (idx == $("id").value) {
                item.no = no;
                item.name = name;
                item.age = age;

}
        })
        obj.value = "登记";
    }

render();
}

//删除学生对象
function removeItem(idx) {
    list.splice(idx, 1);
    render();
}

//修改学生信息
function editItem(idx) {
    $("add").value = "修改";
    $("id").value = idx;
    //回填到输入框
    list.forEach(function(item, index) {
        if (idx == index) {
            $("no").value = item.no;
            $("name").value = item.name;
            $("age").value = item.age;
        }
    })
}

//重新渲染
function render() {

var contentHTML = "";

$("content").innerHTML = "";

if (list.length == 0) {
        contentHTML += '<tr >';
        contentHTML += '   <td colspan="5">';
        contentHTML += '       <div class="alert alert-success" role="alert">暂无学生信息,请添加!</div>';
        contentHTML += '   </td>';
        contentHTML += '</tr>';
    } else {
        list.forEach(function(item, idx) {
            contentHTML += '<tr >';
            contentHTML += '		<td>' + idx + '</td>';
            contentHTML += '		<td>' + item.no + '</td>';
            contentHTML += '		<td>' + item.name + '</td>';
            contentHTML += '		<td>' + item.age + '</td>';
            contentHTML += '		<td>';
            contentHTML += '			<button type="button" class="btn btn-danger btn-sm mr-2" onclick="removeItem(' + idx + ');">删除</button>';
            contentHTML += '			<button type="button" class="btn btn-primary btn-sm mr-2" onclick="editItem(' + idx + ');">修改</button>';
            contentHTML += '		</td>';
            contentHTML += '</tr>';
        });

}

$("content").innerHTML = contentHTML;
}render();

↑上面代码改变，会自动显示代码结果 jQuery调用版本：1.11.3

立即下载

table数据增删改查



代码描述：对学生信息的增删改查

更新时间：2019-11-08 01:31:20

0

最新

发表评论全部评论

暂时没有评论！

登录后才可以评论

30秒后在评论吧!

PROMULGATOR

最初

相关代码

学生信息登记

学生列表

table数据增删改查

最新