我想要用JavaScript动态添加表格,并且是在原有的表格里面增加,要怎么实现呢?

IssacTian 2015-05-22 10:32:19
这是我的HTML代码
{% 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的新手,请问下大家这个应该怎么实现呢?
...全文
285 7 打赏 收藏 转发到动态 举报
写回复
用AI写文章
7 条回复
切换为时间正序
请发表友善的回复…
发表回复
阿狸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
  • 打赏
  • 举报
回复
引用 5 楼 showbo 的回复:
[quote=引用 4 楼 tfd0851 的回复:] [quote=引用 3 楼 showbo 的回复:] 需要添加的内容单独放到一个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>
那怎么从这个页面取值呢?点开查看网页原码还是只有原来的文本框啊,并没有新增?[/quote] js动态添加的数据行查看源代码是看不到的[/quote] 那要怎么获取值呢?
Go 旅城通票 2015-05-22
  • 打赏
  • 举报
回复
引用 4 楼 tfd0851 的回复:
[quote=引用 3 楼 showbo 的回复:] 需要添加的内容单独放到一个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>
那怎么从这个页面取值呢?点开查看网页原码还是只有原来的文本框啊,并没有新增?[/quote] js动态添加的数据行查看源代码是看不到的
IssacTian 2015-05-22
  • 打赏
  • 举报
回复
引用 3 楼 showbo 的回复:
需要添加的内容单独放到一个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>
那怎么从这个页面取值呢?点开查看网页原码还是只有原来的文本框啊,并没有新增?
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>

87,927

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

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