1，Javascript操作table,tr,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")//创建tdcell.appendChild(document.createTextNode(name))//td里注入文本row.appendChild(cell)//将TD注入TRvar 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注入TRdocument.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>2，一般情况下定义一个效果良好的表格采用下面的属性定义方式代码：<table cellSpacing="0" cellPadding="0" border='1' bordercolor="black" style='border-collapse:collapsetable-layout: fixed'></table>当某个td中没有内容或者没有可见元素时，td的border也会消失。解决方案就是给table添加样式border-collapse:collapse 代码段：.text-overflow{ display:block/*内联对象需加*/ width:31emword-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ } 3，但对于表格table来讲是有些不同，代码段：table{ width:30emtable-layout:fixed/* 只有定义了表格的布局算法为fixed，下面td的定义才能起作用。 */ } td{ width:100%word-break:keep-all/* 不换行 */ white-space:nowrap/* 不换行 */ overflow:hidden/* 内容超出宽度时隐藏超出部分的内容 */ text-overflow:ellipsis/* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden一起使用。*/ }
代码如下：
<script>
//js放到table下，才能检测到tr数组
var trs = document.getElementById("tableBox").getElementsByTagName("tr")
var trs=document.getElementById("tableBox").getElementsByTagName("tr")
$(function(){
for(var i=0i<trs.lengthi++){
trs[i].onmousedown = function(){
mousedownclick(this)
}
}
})
function mousedownclick(obj){
for(var j=0j<trs.lengthj++){
if(trs[j]==obj){
trs[j].style.background='blue'
}else{
trs[j].style.background=''
}
}
}
</script>
扩展资料
js操作table的各种用法：
(1)得到table 中tbody 的内容 ：$('#simple-table').find('tbody').html()
(2)点击td时，获取点击的行号：
$('#simple-table tbody').on( 'click', 'td', function (e) {
normalRowIndex = $(this).parent().index()//行号
console.log("正常工作表行："+normalRowIndex)
})
(3)为table追加一行：
function addNormalTR(){
$('#simple-table').find('tbody').append(trtd)//tdtd为拼接的trtd 的html内容。
}
(4) 点击td中的元素获取，当前行号： obj.parentNode.parentNode.rowIndex//obj 为元素对象
方法只有一种。
步骤：
1、获取table的dom节点
2、通过js设置table的height属性
代码示例
<body>
<table id='test' border='1'> 定义一个table
<tr>
<td>111</td><td>222</td>
</tr>
</table>
<script>
var tb = document.getElementById('test')//获取table的dom节点
tb.setAttribute('height',300)//设置table高度为300
</script>
