小白提问。eclipse写的前台表格数据新增。

qq_40915690 2019-03-12 11:59:11
下面是部分的代码
想问怎么样加代码才能在我新增之后数据第一列也会有复选框像图里一样


var aBtnAdd = document.getElementsByClassName('btn-primary')[0];
aBtnAdd.onclick = function () {

oDivP.classList.remove('hide');
oDivC.classList.remove('hide');
//模态框提交
oBtnSubmit.onclick = function () {
//获取姓名
var sName = document.getElementById('inputName').value;
//获取组别
var sgroup = document.getElementById('inputgroup').value;
//获取职位
var spost = document.getElementById('inputpost').value;
//电话
var snum = document.getElementById('inputnum').value;

//创建tr节点
var oTr = document.createElement('tr');
//获取父节点
oTbodyFirst.appendChild(oTr);
//创建td节点

var oTdName = document.createElement('td');
var oTdgroup= document.createElement('td');
var oTdpost = document.createElement('td');
var oTdnum = document.createElement('td');
var oTdOperation = document.createElement('td');
//给td创建一个button节点
var oBtn = document.createElement('button');
var oBtnModify = document.createElement('button');

//给创建的节点赋值
oTdcb.innerHTML = sName;
oTdName.innerHTML = sName;
oTdgroup.innerHTML = sgroup;
oTdpost.innerHTML = spost;
oTdnum.innerHTML = snum;

//给btn按钮赋值
oBtn.className = 'btn btn-danger';
oBtn.innerHTML = '删除';

oBtnModify.className = 'btn btn-info';
oBtnModify.innerHTML = '修改';

//将btn节点加到td节点中
oTdOperation.appendChild(oBtnModify);
//解决两个按钮挨着的问题
oTdOperation.innerHTML += ' ';
oTdOperation.appendChild(oBtn);

//将所有的td节点加到tr中
oTr.appendChild(oTdName);
oTr.appendChild(oTdgroup);
oTr.appendChild(oTdpost);
oTr.appendChild(oTdnum);
oTr.appendChild(oTdOperation);
//清空输入框
document.getElementById('inputName').value = '';
document.getElementById('inputgroup').value = '';
document.getElementById('inputpost').value = '';
document.getElementById('inputnum').value = '';
//隐藏对话框
oDivP.classList.add('hide');
oDivC.classList.add('hide');

};
};

<body>
<div id="shade" class="hide">
<div id="shade_table" class="hide">
<p>姓名 <input type="text" name="uname" id="inputName"></p>
<p>组别 <input type="text" name="ugroup" id="inputgroup"></p>
<p>职位 <input type="text" name="upost" id="inputpost"></p>
<p>电话 <input type="text" name="unum" id="inputnum"></p>
<button id="btn_submit">提交</button>
</div>
</div>

<div class="container"
style="margin-top:100px;">
<div class="row">
<button class="btn btn-del">批量删除</button>
<button class="btn btn-primary">添加</button>
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>全选</th>
<th>姓名</th>
<th>组别</th>
<th>职位</th>
<th>电话</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="checkbox" id="inputcheckbox"></td>
<td>张三</td>
<td>前端</td>
<td>工程师</td>
<td>2435678</td>
<td>
<button class="btn btn-info">修改</button>
<button class="btn btn-danger">删除</button>
</td>
</tr>
...全文
37 回复 打赏 收藏 转发到动态 举报
写回复
用AI写文章
回复
切换为时间正序
请发表友善的回复…
发表回复

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧