87,955
社区成员
发帖
与我相关
我的任务
分享我想要用JavaScript动态添加表格，并且是在原有的表格里面增加，要怎么实现呢？
这是我的HTML代码
原来是这样：
点击“新增一条工作记录后”在原有的表格里增加这三行
这样
我是个js的新手，请问下大家这个应该怎么实现呢？
{% extends 'daily/base.html' %}
{% load staticfiles %}
{% block title %}Index{% endblock %}
{% block body_block %}
<table class="table table-bordered">
<thead>
<tr>
<th>Daily work record </th>
</tr>
</thead>
<tbody>
<tr>
<td><div class="input-group">
<span class="input-group-addon">请输入</span>
<input type="text" class="form-control" placeholder="姓名">
</div></td>
</tr>
<tr>
<td>报告提交日期</td>
</tr>
<tr>
<td><input type="date" class="form-control" name="end_date" /></p></td>
</tr>
<tr>
<td>工作开始时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></p></td>
</tr>
<tr>
<td>工作结束时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></p></td>
</tr>
<tr>
<td>具体工作报告</td>
</tr>
<tr>
<td><input type="textarea" class="form-control" name="record" /></p></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-default btn-lg btn-block" id="add" value = "新增一条工作记录">
<input type="button" class="btn btn-default btn-lg btn-block" value = "提交">原来是这样：
点击“新增一条工作记录后”在原有的表格里增加这三行
<tr>
<td>工作开始时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></p></td>
</tr>
<tr>
<td>工作结束时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></p></td>
</tr>
<tr>
<td>具体工作报告</td>
</tr>
<tr>
<td><input type="textarea" class="form-control" name="record" /></p></td>
</tr>这样
我是个js的新手，请问下大家这个应该怎么实现呢？
...全文
请发表友善的回复…
发表回复
阿狸Ahri 2015-05-22
- 打赏
- 举报
直接用jquery快点，用原生的js的，我不是很懂，不过也相当麻烦吧
类似参照 添加节点
用jquery,直接拼接那个字符串，然后append给table就行了
//先给你的 table加添一个id=tb
function addDeom()
{
var html = "<tr><td>工作开始时间</td></tr><tr>" +
"<td><input type='datetime-local' class='form-control' name='end_date' /></p></td>" +
"</tr><tr> <td>工作结束时间</td> </tr><tr>" +
"<td><input type='datetime-local' class='form-control' name='end_date' /></p></td>" +
"</tr> <tr><td>具体工作报告</td></tr> <tr>" +
" <td><input type='textarea' class='form-control' name='record' /></p></td></tr>";
//上面，就是把你那些html的标签，拼接成字符串，里面的双引号换成单引号就行了
$("#tb").append(html);
}
//给你要的 tr标签 加个类 trClass
function addDeom(){
var trList = $(".trClass");
var html = new Array();
for (var i = 0; i < trList.length; i++) {
html.push($(trList[i]).prop("outerHTML"));
}
$("#tb").append(html.join(""))
}
hch126163 2015-05-22
- 打赏
- 举报
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>js 操作table</title>
<script type="text/javascript">
var tb;
var lastIndex=0;
function AddSignRow()
{
tb=tb|| document.getElementById("SignFrame");
var tr=tb.insertRow(tb.rows.length);
lastIndex++;
if(document.all)
{
var td;
var i=0;
td=tr.insertCell(i++);
td.innerHTML=lastIndex;
for(;i<=5;i++){
td=tr.insertCell(i);
td.innerHTML="<input type=text />";
}
td=tr.insertCell(i);
td.innerHTML="<input type='button' value='删除' onclick='delRow(this)' />";
}else{
tr.innerHTML = "<td >"+lastIndex+"</td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td ><input type=text /></td><td><input type='button' value='删除' onclick='delRow(this)' /></td>";
}
}
function ClearAllSign()
{
tb=tb|| document.getElementById("SignFrame");
var inputs=tb.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
if(inputs[i].type.toLowerCase()=='text'){
inputs[i].value="";
}
}
}
function delRow(obj){
obj = getParentRow(obj);
if(obj){
obj.parentNode.removeChild(obj);
}
}
function getParentRow(obj)
{
var r = obj.parentNode;
while(r!=null && r.tagName!="TR") {
r = r.parentNode;
}
return r;
}
function DeleteAll(){
tb=tb|| document.getElementById("SignFrame");
if(document.all)
{
for(var i=tb.childNodes.length-1;i>=0;i--){
tb.removeChild(tb.childNodes[i]);
}
}else{
tb.innerHTML="";
}
lastIndex=0;
}
function disPlayCell(t,c,isDisplay)
{
c=parseInt(c);
if(t && t.rows && t.rows.length >0)
{
for(var i=0;i<t.rows.length;i++)
{
if(c<t.rows[i].cells.length)
{
t.rows[i].cells[c].style.display= isDisplay?"block":"none";
}
}
}
}
</script>
</head>
<body>
<div>
<table width="613" border="0" cellpadding="2" cellspacing="1" >
<thead id="trHeader">
<tr>
<td width="40" bgcolor="#96E0E2">序号</td>
<td width="64" bgcolor="#96E0E2">用户姓名</td>
<td width="98" bgcolor="#96E0E2">电子邮箱</td>
<td width="92" bgcolor="#96E0E2">固定电话</td>
<td width="86" bgcolor="#96E0E2">移动手机</td>
<td width="153" bgcolor="#96E0E2">公司名称</td>
<td width="57" align="center" bgcolor="#96E0E2"> </td>
</tr>
</thead>
<tbody id="SignFrame" bgcolor="#96E0E2">
</tbody>
</table>
</div>
<div>
<input type="button" value="添加参与人" onclick="AddSignRow()" />
<input type="button" value="清空" onclick="ClearAllSign()" />
<input type="button" value="删除所有" onclick="DeleteAll()" />
<input type="button" value="隐藏第一列" onclick="disPlayCell(document.getElementById('SignFrame'),0,0)" />
<input type="button" value="显示第一列" onclick="disPlayCell(document.getElementById('SignFrame'),0,1)" />
</div>
</body>
</html>
lzpggg 2015-05-22
- 打赏
- 举报
那要怎么获取值呢？
<script>
var i=1;
function cloneTBody() {
var t = document.getElementById('tbodyTpl');
var node = t.cloneNode(true);
node.id="appendId_"+i++;
t.parentNode.appendChild(node);
}
</script>
IssacTian 2015-05-22
- 打赏
- 举报
那怎么从这个页面取值呢？点开查看网页原码还是只有原来的文本框啊，并没有新增？[/quote]
js动态添加的数据行查看源代码是看不到的[/quote]
那要怎么获取值呢？
Go 旅城通票 2015-05-22
- 打赏
- 举报
那怎么从这个页面取值呢？点开查看网页原码还是只有原来的文本框啊，并没有新增？[/quote]
js动态添加的数据行查看源代码是看不到的
IssacTian 2015-05-22
- 打赏
- 举报
那怎么从这个页面取值呢？点开查看网页原码还是只有原来的文本框啊，并没有新增？
Go 旅城通票 2015-05-22
- 打赏
- 举报
需要添加的内容单独放到一个tbody里面，clone下就好了
<table class="table table-bordered">
<thead>
<tr>
<th>Daily work record </th>
</tr>
</thead>
<tr>
<td><div class="input-group">
<span class="input-group-addon">请输入</span>
<input type="text" class="form-control" placeholder="姓名">
</div></td>
</tr>
<tr>
<td>报告提交日期</td>
</tr>
<tr>
<td><input type="date" class="form-control" name="end_date" /></td>
</tr>
<tbody id="tbodyTpl">
<tr>
<td>工作开始时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></td>
</tr>
<tr>
<td>工作结束时间</td>
</tr>
<tr>
<td><input type="datetime-local" class="form-control" name="end_date" /></td>
</tr>
<tr>
<td>具体工作报告</td>
</tr>
<tr>
<td><input type="textarea" class="form-control" name="record" /></td>
</tr>
</tbody>
</table>
<input type="button" class="btn btn-default btn-lg btn-block" id="add" value = "新增一条工作记录" onclick="cloneTBody()">
<input type="button" class="btn btn-default btn-lg btn-block" value = "提交">
<script>
function cloneTBody() {
var t = document.getElementById('tbodyTpl');
t.parentNode.appendChild(t.cloneNode(true));
}
</script>
