js拼接字符串练习(一)

js拼接字符串练习(一)动态生成表格,通过用户输入的背景颜色、边框宽度、表格宽度、对齐方式、行高、内容来动态生成表格:<!DOCTYPEhtml><html> <head> <metacharset="UTF-8"> <title></title> </head> <body&amp

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全家桶1年46,售后保障稳定

动态生成表格,通过用户输入的背景颜色、边框宽度、表格宽度、对齐方式、行高、内容来动态生成表格:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		</table>-->
		<script type="text/javascript">
			var bgColor = prompt('请输入表格背景颜色');
			var border = prompt('请输入表格边框宽度');
			var width = prompt('请输入表格宽度');
			var align = prompt('请输入表格对齐方式');
			var height = prompt('请输入表格行的高度');
			var td1 = prompt('请输入单元格1的内容');
			var td2 = prompt('请输入单元格2的内容');
			
			var table = '<table bgcolor="' + bgColor + '" border="' + border + '" width="' + width + '" align="' + align + '">'
				table += '	<tr height="' + height + '">'
				table += '		<td>' + td1 + '</td>'
				table += '		<td>' + td2 + '</td>'
				table += '	</tr>'
				table += '</table>'
			document.write(table);
		</script>
	</body>
</html>

Jetbrains全家桶1年46,售后保障稳定

这里说一个小窍门,动态生成表格的拼接字符串可以先在body中生成你想要的表格,然后将其连同缩进也都一行一行复制过来,这样能看的清晰,每一行的变量用+=相连接。
这里手动输入测试的数据依次是:green、1、500、center、50、111、111。
输出结果:
在这里插入图片描述

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/219052.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 更新pycharm版本_pycharm怎么更改python环境

    更新pycharm版本_pycharm怎么更改python环境如下图,记录要勾选Makeavaliabletoallprojects,然后查看是否加载出所有的第三方插件,会遇到插件安装后,运行还是找不到插件的问题,就是这里选择的不对,Pycharm总是会自己修改Baseinterperter路径,安装好后,在这里修改路径,看到有加载出来就可以了…

    2022年8月27日
    5
  • java中Switch(expr)里面的参数的类型是?

    java中Switch(expr)里面的参数的类型是?在Java5以前,switch(expr)中,exper只能是byte,short,char,int类型在JDK1.6:引入enumJDK1.7时:又增加了Stringpublic static void main(String[] args) { switch ("123") { case "123": System.out.println("1234"); b…

    2022年6月13日
    39
  • [随笔] IE8Beta2 的标准是不是太高了!

    [随笔] IE8Beta2 的标准是不是太高了!昨天安装了ie8beta2,发现网上支付都无法操作。支付宝无法使用。切换兼容模式也没有效果。各位高手有知道怎么回事的吗?请指教!!!!!转载于:https://www.cnblogs.com/zangdalei/archive/2008/08/29/1279160.html…

    2025年7月18日
    3
  • 计算机加密无法连接打印机,0x00000006无法连接打印机怎么办[通俗易懂]

    计算机加密无法连接打印机,0x00000006无法连接打印机怎么办[通俗易懂]0x00000006无法连接打印机怎么办?解决思路一:WIN10作为主机共享的话要设置一下,具体如下,鼠标右击任务栏网络图标,在菜单中左键点击打开网络和共享中心,鼠标左键点击打开窗口的左上角更改高级共享设置,在打开的窗口中,鼠标左键点击所有网络,选择1.公用文件夹(启用)2.文件共享连接使用128位加密3.密码保护的共享(关闭),保存。然后去需要共享的机器:按下键盘左下角的window…

    2022年5月15日
    169
  • n皇后问题有几个解_求n的阶乘java代码

    n皇后问题有几个解_求n的阶乘java代码N皇后问题是一个经典的问题,在一个N*N的棋盘上放置N个皇后,每行一个并使其不能互相攻击(同一行、同一列、同一斜线上的皇后都会自动攻击)。n皇后问题不算是陈词滥调,也是老生常谈了,作为回溯的经典案例,有递归和非递归两种实现方式,同时,除了回溯算法,最近我在网上查了下看到还可以用位运算来解决这个问题。本次趁着本学期算法课程的期末要求,我将对两种算法的实验效果进行分析。1、使用回溯解决n皇后问

    2022年9月30日
    2
  • devtools安装_检测devtools

    devtools安装_检测devtoolsvue-devtools是一款基于chrome浏览器的插件,用于调试vue应用。安装:chrome商店直接安装。手动安装步骤:找到vue-devtools的github项目,并将其clone到本地:gitclonehttps://github.com/vuejs/vue-devtools.git安装项目所需要的npm包:npminstall编译项目文件:npmrunbuild添加至chrome浏览器:地址(“chrome://extensions/”)进入扩展程序页面,点击“加载

    2022年9月1日
    3

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号