用js操作table、tr、td 「字体样式及TD背景图片」
function messageSort() { --函数名
var message=document.getElementById("message").value; --添加的内容(下面有对应的html)
if(name == "" ) return; --如果添加为空,返回
var row = document.createElement("tr"); //创建tr的
row.setAttribute("id", name); --设置row的属性.
var cell = document.createElement("td");//创建td
cell.appendChild(document.createTextNode(name));//td里注入文本
row.appendChild(cell);//将TD注入TR
var deleteButton = document.createElement("input"); //这部分是添加删除button按钮
deleteButton.setAttribute("type", "button");
deleteButton.setAttribute("value", "删除");
deleteButton.onclick = function () { deleteSort(name); };
cell = document.createElement("td");
cell.appendChild(deleteButton);//注入按钮
row.appendChild(cell);//将TD注入TR
document.getElementById("sortList").appendChild(row);//将TR注入到相应地方(sortList可以看下面html)
var cell5 = document.createElement("td");
cell.style.background="#ffffff";//背景颜色设置
row1.style.color="#ffffff"; //字体颜色设置
cell5.style.display = "none" ; //ie不支持setAttribute("style", "display:none");
// <td style="display:none" >dd</td> 直接写TD是这样..
cell5.appendChild(document.createTextNode(zdid));
row.appendChild(cell5);
}
// 删除内容
function deleteSort(id) {//这个函数为上面的删除button调用的
var rowToDelete = document.getElementById(id);
var sortList = document.getElementById("sortList");
sortList.removeChild(rowToDelete);
}
</script>
</head>
<body>
<table border="0" cellspacing="0" width="400" bgcolor="#f5efe7">
<tr>
<td height="20">增加内容:</td>
<td><input id="message" type="text"></td>
<td><a href="javascript:messageSort();">添加</a></td>
</tr>
</table>
<table border="1" width="400">
<tr>
<td height="20" align="center">内容:</td>
<td>操作</td>
</tr>
<tbody id="sortList"></tbody>
</table>
</body>
ps: document.style.backgroundImage="url('http://t1.baidu.com/it/u=1300390954,3399399465&fm=0&gp=0.jpg')"; //改变背景图片
$("#demo_table").attr("background","2.jpg");//jquery
转载自:http://blog.csdn.net/liujs_vb/article/details/6939473
转载于:https://www.cnblogs.com/fyq891014/archive/2012/07/12/2990423.html
用js操作table、tr、td 「字体样式及TD背景图片」相关推荐
- Javascript操作table,tr,td和表格CSS样式设置小常识
效果良好的表属性设置: <table cellSpacing="0" cellPadding="0" border='1' bordercolor=&qu ...
- html表格整体左移动,js操作table统制tr jquery 两个table左右移动
js操作table控制tr jquery 两个table左右移动 一.关于动态操作select的问题: ------------------------------------------------ ...
- js操作table中tr的顺序,实现上移下移一行的效果
总体思路是在table外部加个div,修改div的innerHtml实现改变tr顺序的效果 具体思路是 获取当前要移动tr行的rowIndex,在table中删除掉,然后循环table的rows,到了 ...
- js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
- js 操作table: insertRow(),deleteRow(),insertCell(),deleteCell()方法
表格有几行: var trCnt = table.rows.length; (table为Id ) 每行有几列:for (var i=0; i<trCnt; i++) ...
- Vue——10 - webpack打包保姆级教程01——打包js、json、css、less、html、背景图片以及图片、字体(Font)文件,devsever,生产环境配置以及css的兼容写法
目录 一.webpack打包JS文件 1.新建入口文件index.js和mathUtils.js,index.js是依赖于mathUtils.js 2.然后使用webpack命令打包js文件 二.打包 ...
- Button扩展累CButtonST修改字体、背景色和背景图片
CButtonST m_btnTest; //修改字体颜色 m_btnTest.SetColor(CButtonST::BTNST_COLOR_FG_OUT, RGB(255,255,255)); m ...
- html tr加样式,Javascript操作table,tr,td和表格CSS样式设置小常识
效果图:方法一 姓名 性别 住址 电话 张三 男 ...
- 汇总常用的jQuery操作Table tr td方法
2019独角兽企业重金招聘Python工程师标准>>> 1.鼠标移动行变色 方法一:jQuery中的hover(fun(),fun())方法,参数一:第一个方法是添加样式功能,参数二 ...
最新文章
- mysql-Mac终端下遇到的问题总结
- 2020年PMCAFF大咖分享合集(有回放)
- 基于pygtk的linux有道词典
- 如何让博客变得稍稍好看
- 获取远程linux版本,远程批量获取Linux和Windos操作系统版本(内核)
- MATLAB 格拉布斯准则代码
- win10企业版激活简便方法
- kernel ramdump分析--如何启动crash
- python Excel xlsx file; not supported
- 分享一个HTML【叶子特效】,确切一点 是 落叶特效(完整代码)
- 360°幻影成像展示产品,带来逼真的视觉效果
- Java Obiect类--------11
- 《MATLAB图像处理实例详解》:CH_7(图像分割技术)
- twitter软件资源_从Twitter实习生到全职Twitter软件工程师的学到的知识
- 托管网站需要知道的网站优化指标有哪些
- 良心推荐:看完这5部BBC神级纪录片,英语水平提升几个Level!
- (一,1NN-QI)神经网络与深度学习——吴恩达深度学习配套笔记
- android6支持内存卡,诺基亚6可以插内存卡吗 Nokia 6支持内存卡扩展吗
- 双系统 linux声卡驱动程序,安装linux windows双系统
- flir相机、livox和xsense驱动安装与测试笔记