您的位置：首页 > Web前端 > CSS

用js操作table、tr、td 「字体样式及TD背景图片」

2012-07-12 11:36 671 查看

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

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航