您的位置：首页 > 产品设计 > UI/UE

layui动态添加删除表格，并获取表格中的值

2018-01-08 14:27 429 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui动态添加删除表格，并获取表格中的值</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="css/layui.css" media="all">

标题

选项

直接选择或搜索选择
{foreach from=$info item=vo}
{$vo.title}
{/foreach}

输入框

添加到表格


名称1	名称2	名称3	操作

提交

var form = layui.form,layer = layui.layer;
var $ = layui.$;
var element = layui.element;
function add() {
var trObj = document.createElement("tr");
trObj.id = new Date().getTime();
trObj.innerHTML = ""+id+""+title+""+num+"删除";
document.getElementById("tb").appendChild(trObj);
}
function del(obj) {
var trId = obj.parentNode.parentNode.id;
var trObj = document.getElementById(trId);
document.getElementById("tb").removeChild(trObj);
}
//监听提交
form.on('submit(demo2)', function(data){
// layer.alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// })
var title=$("#title").val();
if(title==''){
layer.msg("标题不能为空！");
return false;
}
$.post("test.php",data.field,function(backdata){
layer.alert(backdata);
});
return false;
});

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： layui table

相关文章推荐

新的分享

章节导航