根据选择日期动态生成table表格，谢谢！

nitaiyoucala 2018-08-16 03:01:25
比如我选择的日期如下：

我想动态生成如下表格：
...全文
745 18 打赏 收藏 转发到动态 举报
写回复
用AI写文章
18 条回复
切换为时间正序
请发表友善的回复…
发表回复
風灬雲 2018-08-22
  • 打赏
  • 举报
 回复
引用 17 楼 qq_41114603 的回复:
<!DOCTYPE>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" charset="utf-8"/>

<script src="./js/jquery@2.2.4.js" type="text/javascript"></script>
<style type="text/css">

</style>

</head>
<body>
<table id="tab"><tr></tr><tr></tr></table>
</body>

<script>

function test(start_str, end_str){
var date=new Date(start_str);
var dateArr=[],day=0;
do{
date.setDate(date.getDate()+1)
dateArr.push(date.toLocaleDateString());
}while(date.getTime()<new Date(end_str).getTime());
console.log(dateArr);
var html = "<th>日期</th>";
for(var i=0,len=dateArr.length; i<len; i++){
html += "<th>"+dateArr[i]+"</th>"
}
jQuery("#tab tr:eq(0)").html(html);
}

test('2018-02-26', '2018-03-05');

</script>

</html>


少了开始那天，dateArr初始化的时候写成dateArr=[ date.toLocaleDateString()],就可以了
風灬雲 2018-08-22
  • 打赏
  • 举报
 回复
<!DOCTYPE>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" charset="utf-8"/>

<script src="./js/jquery@2.2.4.js" type="text/javascript"></script>
<style type="text/css">

</style>

</head>
<body>
<table id="tab"><tr></tr><tr></tr></table>
</body>

<script>

function test(start_str, end_str){
var date=new Date(start_str);
var dateArr=[],day=0;
do{
date.setDate(date.getDate()+1)
dateArr.push(date.toLocaleDateString());
}while(date.getTime()<new Date(end_str).getTime());
console.log(dateArr);
var html = "<th>日期</th>";
for(var i=0,len=dateArr.length; i<len; i++){
html += "<th>"+dateArr[i]+"</th>"
}
jQuery("#tab tr:eq(0)").html(html);
}

test('2018-02-26', '2018-03-05');

</script>

</html>
nayi_224 2018-08-21
  • 打赏
  • 举报
 回复
<!DOCTYPE>
<html>
<head>
<title></title>
<meta http-equiv="X-UA-Compatible" charset="utf-8"/>

<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>
<style type="text/css">

</style>

</head>
<body>

<table id="tab"><tr></tr><tr></tr></table>

</body>

<script>

function test(start_str, end_str){

var year1 = start_str.substring(0, 4);
var month1 = start_str.substring(5, 7);
var day1 = start_str.substring(8, 10);

var start_dat = new Date(year1, parseInt(month1) - 1, day1);

var year2 = end_str.substring(0, 4);
var month2 = end_str.substring(5, 7);
var day2 = end_str.substring(8, 10);

var end_dat = new Date(year2, parseInt(month2) - 1, day2);

var html = "<td>日期</td>";

while(start_dat <= end_dat){
html += "<td>";
html += start_dat.getFullYear() + "-" + (start_dat.getMonth() + 1) + "-" + start_dat.getDate();
html += "</td>";
start_dat.setDate(start_dat.getDate() + 1);
}

jQuery("#tab tr:eq(0)").html(html);
}

test('2018-02-26', '2018-03-05');

</script>

</html>
nitaiyoucala 2018-08-20
  • 打赏
  • 举报
 回复
引用 10 楼 nayi_224 的回复:
<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>

	

	<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>

<style type="text/css">



</style>



</head>

<body>



<table id="tab"><tr></tr><tr></tr></table>



</body>



<script> 

	

	function test(start_str, end_str){

	

        var year1 = start_str.substring(0, 4);

        var month1 = start_str.substring(5, 7);

        var day1 = start_str.substring(8, 10);



		var start_dat = new Date(year1, parseInt(month1) + 1, day1);

		

		var year2 = end_str.substring(0, 4);

        var month2 = end_str.substring(5, 7);

        var day2 = end_str.substring(8, 10);

		

		var end_dat = new Date(year2, parseInt(month2) + 1, day2);



		var html = "<td>日期</td>";

		

		while(start_dat <= end_dat){

			html += "<td>";

			html += start_dat.getFullYear() + "-" + (start_dat.getMonth() - 1) + "-" + start_dat.getDate();

			html += "</td>";

			start_dat.setDate(start_dat.getDate() + 1);

		}

		

		jQuery("#tab tr:eq(0)").html(html);

	}

	

	test('2018-08-17', '2018-08-20');

	

</script>



</html>


感谢。
但是这样 2月份会有2月31号，是不是哪里有点儿问题 test('2018-02-26', '2018-03-2');
天际的海浪 2018-08-20
  • 打赏
  • 举报
 回复 


<!DOCTYPE>

<html>

<head>

    <title></title>

	<meta charset="UTF-8" />

	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

	<script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

</head>

<body>



<table id="tab" border="1">

	<tr><td>日期</td></tr>

	<tr><td>量</td></tr>

</table>

</body>

<script> 

	

	function test(start_str, end_str){

		var da1 = start_str.match(/\d+/g);

		var start_dat = new Date(parseInt(da1[0],10),parseInt(da1[1],10)-1,parseInt(da1[2],10));

		var da2 = end_str.match(/\d+/g);

		var end_dat = new Date(parseInt(da2[0],10),parseInt(da2[1],10)-1,parseInt(da2[2],10));

		$("#tab td:not(:first-child)").remove();

		while(start_dat <= end_dat){

			$("#tab tr").append("<td>");

			$("#tab tr:first-child td:last-child").append(start_dat.getFullYear() + "/" + (start_dat.getMonth() + 1) + "/" + start_dat.getDate());

			start_dat.setDate(start_dat.getDate() + 1);

		}

	}

	

	test('2018-02-26', '2018-03-02');

	

</script>



</html>
nitaiyoucala 2018-08-20
  • 打赏
  • 举报
 回复
引用 13 楼 jslang 的回复:
[quote=引用 12 楼 nitaiyoucala 的回复:]
[quote=引用 10 楼 nayi_224 的回复:]
<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>

	

	<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>

<style type="text/css">



</style>



</head>

<body>



<table id="tab"><tr></tr><tr></tr></table>



</body>



<script> 

	

	function test(start_str, end_str){

	

        var year1 = start_str.substring(0, 4);

        var month1 = start_str.substring(5, 7);

        var day1 = start_str.substring(8, 10);



		var start_dat = new Date(year1, parseInt(month1) + 1, day1);

		

		var year2 = end_str.substring(0, 4);

        var month2 = end_str.substring(5, 7);

        var day2 = end_str.substring(8, 10);

		

		var end_dat = new Date(year2, parseInt(month2) + 1, day2);



		var html = "<td>日期</td>";

		

		while(start_dat <= end_dat){

			html += "<td>";

			html += start_dat.getFullYear() + "-" + (start_dat.getMonth() - 1) + "-" + start_dat.getDate();

			html += "</td>";

			start_dat.setDate(start_dat.getDate() + 1);

		}

		

		jQuery("#tab tr:eq(0)").html(html);

	}

	

	test('2018-08-17', '2018-08-20');

	

</script>



</html>


感谢。
但是这样 2月份会有2月31号，是不是哪里有点儿问题 test('2018-02-26', '2018-03-2');
[/quote]
Date()的月份值在设置时要减1
getMonth()获取后才是加1
他的代码弄反了
[/quote]

试过，也不对啊
天际的海浪 2018-08-20
  • 打赏
  • 举报
 回复
引用 12 楼 nitaiyoucala 的回复:
[quote=引用 10 楼 nayi_224 的回复:]
<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>

	

	<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>

<style type="text/css">



</style>



</head>

<body>



<table id="tab"><tr></tr><tr></tr></table>



</body>



<script> 

	

	function test(start_str, end_str){

	

        var year1 = start_str.substring(0, 4);

        var month1 = start_str.substring(5, 7);

        var day1 = start_str.substring(8, 10);



		var start_dat = new Date(year1, parseInt(month1) + 1, day1);

		

		var year2 = end_str.substring(0, 4);

        var month2 = end_str.substring(5, 7);

        var day2 = end_str.substring(8, 10);

		

		var end_dat = new Date(year2, parseInt(month2) + 1, day2);



		var html = "<td>日期</td>";

		

		while(start_dat <= end_dat){

			html += "<td>";

			html += start_dat.getFullYear() + "-" + (start_dat.getMonth() - 1) + "-" + start_dat.getDate();

			html += "</td>";

			start_dat.setDate(start_dat.getDate() + 1);

		}

		

		jQuery("#tab tr:eq(0)").html(html);

	}

	

	test('2018-08-17', '2018-08-20');

	

</script>



</html>


感谢。
但是这样 2月份会有2月31号，是不是哪里有点儿问题 test('2018-02-26', '2018-03-2');
[/quote]
Date()的月份值在设置时要减1
getMonth()获取后才是加1
他的代码弄反了
nitaiyoucala 2018-08-17
  • 打赏
  • 举报
 回复
搞了一夜 没搞好，求代码啊 谢谢
我是老孙 2018-08-17
  • 打赏
  • 举报
 回复
要有思路，然后百度
nayi_224 2018-08-17
  • 打赏
  • 举报
 回复 
<!DOCTYPE>

<html>

<head>

    <title></title>

    <meta http-equiv="X-UA-Compatible" charset="utf-8"/>

	

	<script src="../js/jquery-3.2.1.min.js" type="text/javascript"></script>

<style type="text/css">



</style>



</head>

<body>



<table id="tab"><tr></tr><tr></tr></table>



</body>



<script> 

	

	function test(start_str, end_str){

	

        var year1 = start_str.substring(0, 4);

        var month1 = start_str.substring(5, 7);

        var day1 = start_str.substring(8, 10);



		var start_dat = new Date(year1, parseInt(month1) + 1, day1);

		

		var year2 = end_str.substring(0, 4);

        var month2 = end_str.substring(5, 7);

        var day2 = end_str.substring(8, 10);

		

		var end_dat = new Date(year2, parseInt(month2) + 1, day2);



		var html = "<td>日期</td>";

		

		while(start_dat <= end_dat){

			html += "<td>";

			html += start_dat.getFullYear() + "-" + (start_dat.getMonth() - 1) + "-" + start_dat.getDate();

			html += "</td>";

			start_dat.setDate(start_dat.getDate() + 1);

		}

		

		jQuery("#tab tr:eq(0)").html(html);

	}

	

	test('2018-08-17', '2018-08-20');

	

</script>



</html>
winzond 2018-08-16
  • 打赏
  • 举报
 回复
首先：删除所有tr（本例只有两个）除第一个td外的所有td元素；然后：根据选择的日期循环，循环体内在日期tr内添加相应日期的td元素，在量tr内添加相应量的td元素。搞定。
我的建议是，不需要算出一共多少天，日期是可以累加和比较的，首先比较前面的日期是否大于后面的日期，如果大于，就返回不执行，也许日期增加需要自定义，但，你实际是要有这个函数的，因为表格显示需要，重复利用这段函数就行了。
___紫菜 2018-08-16
  • 打赏
  • 举报
 回复
引用 6 楼 u013116426 的回复:
[quote=引用 5 楼 nitaiyoucala 的回复:]
[quote=引用 4 楼 u013116426 的回复:]
算出一共多少天然后循环列填充日期


呃。。。日期怎么显示[/quote]
获取控制的值循环累加[/quote]
获取日期控件的值循环累加
___紫菜 2018-08-16
  • 打赏
  • 举报
 回复
引用 5 楼 nitaiyoucala 的回复:
[quote=引用 4 楼 u013116426 的回复:]
算出一共多少天然后循环列填充日期


呃。。。日期怎么显示[/quote]
获取控制的值循环累加
nitaiyoucala 2018-08-16
  • 打赏
  • 举报
 回复
引用 4 楼 u013116426 的回复:
算出一共多少天然后循环列填充日期


呃。。。日期怎么显示
___紫菜 2018-08-16
  • 打赏
  • 举报
 回复
算出一共多少天然后循环列填充日期
nitaiyoucala 2018-08-16
  • 打赏
  • 举报
 回复
引用 2 楼 jinhx 的回复:
很多人都认为别人一定能知道自己在说什么！

你的问题是什么？


请仔细看下。。。
jinhx 2018-08-16
  • 打赏
  • 举报
 回复
很多人都认为别人一定能知道自己在说什么！

你的问题是什么？
nitaiyoucala 2018-08-16
  • 打赏
  • 举报
 回复
有大牛吗 。。。。。
在 Vue3 + Element Plus 中生成动态表格，动态修改表格，多级表头，合并单元格
在 Vue 中，表格组件是使用频率及复杂度排名第一的组件，前端经常需要根据后台返回的数据动态渲染表格，比如动态表格如何生成，因为表格的列并不是固定的，在未知表格具体有哪些列的场景下，前端如何动态渲染表格数据。又或者需要把表格单元格进行合并处理，比如第一列是日期，需要把相同的日期进行合并，这样表格看起来会更加清晰。 本文手把手教你如何在 Vue3 + Element Plus 中创建表格、生成动态表格、创建动态多级表头、表格行合并、列合并等问题。如果你正在搭建后台管理工具，又不想处理前端问题，推荐使用卡拉云
vue 封装动态生成form表单和table表格组件
背景 项目中经常遇到新加功能和之前功能类似，结构不变，只是名称和值变化，因此将常用的form表单检索和table表格展示进行封装，有助于提高开发效率和统一样式风格。 注：示例中使用iview框架，实际代码结构类似，供参考。 动态生成 form 表单组件 使用说明： 引入文件并注册 页面使用并传参，支持输入框、日期选择、下拉选择和查询按钮搜索项，搜索项后面可以通过插槽添加自定义内容 组件暴露出的数据为 form 表单项最新数据 API： form props 属性 说明 类型 默认值
vue+element ui生成以当月日期时间为表头的table表格
以月份日期时间作为表头的动态表格的生成
用bootstrapTable实现考勤报表的动态生成
在设计考勤报表的时候，由于每个月的日期是不同的，所以他的表需要动态生成。而bootstrapTable表格的初始化时候，是根据开始时候静态页面所规定的th标签中内容进行初始化。例如：<table id="tablesinglelast"> <thead> <tr> <th data-field="workDate" id="ws.ref_date"
ant desgin vue table动态循环生成表格
场景： 根据选择日期年月份进行动态往表格添加数项 话不多说，下面直接上代码 一、html代码 <!-- 表格 --> <div class="admin_table_list"> <a-spin tip="Loading..." :spinning="spinning"> <a-table bordered size="small" :rowkey="id" :comp
JavaScript

87,909

社区成员

224,616

社区内容

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

加载中

查看更多榜单
社区公告
暂无公告

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

+ 用AI写文章