js操作table 比较急 谢谢你啊

yu_shi_bin 2009-05-31 08:20:46
我想用js在下面的2个tr上加上thead怎么加
<thead>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION </td>
<td colspan="1">test 2 </td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name </th>
<th scope="col">desc </th>
<th scope="col">UPC </th>
</tr>
</thead>

<TABLE style="FONT-SIZE: 11px" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle>
<DIV>
<TABLE id=GridView1>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION </td>
<td colspan="1">test 2 </td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name </th>
<th scope="col">desc </th>
<th scope="col">UPC </th>
</tr> <tr>
<td>test 1 </td>
<td>test 2 </td>
<td>test3 </td>
</tr>
</TABLE>
...全文
106 9 打赏 收藏 转发到动态 举报
写回复
用AI写文章
9 条回复
切换为时间正序
请发表友善的回复…
发表回复
yu_shi_bin 2009-06-01
  • 打赏
  • 举报
 回复
<script type="text/javascript">
//<![CDATA[
var tb = document.getElementById('GridView1');
var thd = document.createElement('thead');
var tr1 = tb.rows[0];
var tr2 = tb.rows[1];
tb.insertBefore( thd, tb.firstChild );
thd.appendChild( tr1 );
thd.appendChild( tr2 );
alert(tb.innerHTML);
alert(tr1.innerHTML);
alert(tr2.innerHTML);
//]]>
</script>

可以实现啦
Forever_He 2009-06-01
  • 打赏
  • 举报
 回复
学习...
yu_shi_bin 2009-06-01
  • 打赏
  • 举报
 回复
感觉上面的 都不是我要的 贴的不是我想要的效果

我是表格后台生成已经是这样的啦
<TABLE style="FONT-SIZE: 11px" cellSpacing=0 cellPadding=0 width="100%" border=0>
<TBODY>
<TR>
<TD align=middle>
<DIV>
<TABLE id=GridView1>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION </td>
<td colspan="1">test 2 </td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name </th>
<th scope="col">desc </th>
<th scope="col">UPC </th>
</tr>
<tr>
<td>test 1 </td>
<td>test 2 </td>
<td>test3 </td>
</tr>
</TABLE>


我想通过js来实现加thead
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION </td>
<td colspan="1">test 2 </td>
</tr>
<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<th scope="col">name </th>
<th scope="col">desc </th>
<th scope="col">UPC </th>
</tr>


如果只有一个<tr style="color:#F7F7F7;background-color:#003366;font-size:8pt;">
<td colspan="2">test INFORMATION </td>
<td colspan="1">test 2 </td>
</tr> 那通过下面的js就可以啦

function AddTHEAD(tableName)
{
var table = document.getElementById(tableName);
if(table != null)
{
var head = document.createElement("THEAD");
head.style.display = "table-header-group";
head.appendChild(table.rows[0]);
table.insertBefore(head, table.childNodes[0]);
}
}
lihan6415151528 2009-06-01
  • 打赏
  • 举报
 回复 


<html>



<head>



<title></title>



</head>



<body>

<table id="testTbl" border=1>

<tr>

 <td>

  产品名称

 </td>

 <td>

  产品数量

 </td>

 <td>

 产品单价

 </td>

</tr>

<tr>

 <td>

 <select name="a">

   <option value="电子">电子</option>

   <option value="电器">电器</option>

 </select></td>

 <td>

    <input type="text" name="b">

     </td>

 <td>

    <input type="text" name="c">

     </td>

</td>

</table>



<input type="button" name="Submit2" value="添加" onclick="addRow()">



<script>

function addRow(){



//添加行





var newTr = testTbl.insertRow();



//添加列



var newTd0 = newTr.insertCell();



var newTd1 = newTr.insertCell();



var newTd2 = newTr.insertCell();



var newTd3 = newTr.insertCell();



//设置列内容和属性





newTd0.innerText = document.all("a").options[document.all("a").selectedIndex].text; 



newTd1.innerText = document.all("b").value;



newTd2.innerText = document.all("c").value;



newTd3.innerHTML= '<input type="button" name="del" value="删除" onclick="del(this)">';



}

function del(o)

{

 var   t=document.getElementById('testTbl');

  t.deleteRow(o.parentNode.parentNode.rowIndex)

}

</script> 





</body>



</html>





本文来自CSDN博客，转载请标明出处：http://blog.csdn.net/laolaowhn/archive/2008/05/04/2384009.aspx
maximus_zhang 2009-06-01
  • 打赏
  • 举报
 回复
http://topic.csdn.net/u/20090531/19/982e44ca-3603-453d-a110-07e7c7659823.html
原来发了2次～～
xue08161981 2009-05-31
  • 打赏
  • 举报
 回复
不知道，也顶一下，不让帖子沉下去
No_Data_Found 2009-05-31
  • 打赏
  • 举报
 回复
贴错了


定义和用法
createTHead() 方法用于在表格中获取或创建 <thead> 元素。

语法
tableObject.createTHead()返回值
返回一个 TableSection，表示该表的 <thead> 元素。如果该表格已经有了表头，则返回它。如果该表没有表头，则创建一个新的空 <thead> 元素，把它插入表格，并返回它。


http://www.w3school.com.cn/htmldom/met_table_createthead.asp

实例
下面的例子为表格创建了一个脚注：

<html>

<head>

<script type="text/javascript">

function createCaption()

{

var x=document.getElementById('myTable').createTHead()

x.innerHTML="My table head"

}

</script>

</head>

<body>



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

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="createCaption()"

value="Create caption">



</body>

</html>
No_Data_Found 2009-05-31
  • 打赏
  • 举报
 回复
http://log-cd.javaeye.com/blog/296508


oTCaption=oTable.createCaption();
oTHead=oTable.createTHead();
oTFoot=oTable.createTFoot();


定义和用法
createCaption() 方法用于在表格中获取或创建 <caption> 元素。

语法
tableObject.createCaption()返回值
返回一个 HTMLElement 对象，表示该表的 <caption> 元素。如果该表格已经有了标题，则返回它。如果该表没有 <caption> 元素，则创建一个新的空 <caption> 元素，把它插入表格，并返回它。


http://www.w3school.com.cn/htmldom/met_table_createcaption.asp

实例
下面的例子为表格创建了一个标题：

<html>

<head>

<script type="text/javascript">

function createCaption()

{

var x=document.getElementById('myTable').createCaption()

x.innerHTML="My table caption"

}

</script>

</head>

<body>



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

<tr>

<td>Row1 cell1</td>

<td>Row1 cell2</td>

</tr>

<tr>

<td>Row2 cell1</td>

<td>Row2 cell2</td>

</tr>

</table>

<br />

<input type="button" onclick="createCaption()"

value="Create caption">



</body>

</html>
孟子E章 2009-05-31
  • 打赏
  • 举报
 回复
其实，表格在内存中已经存在tbody的，可以使用tbody进行处理

alert(document.getElementById("GridView1").innerHTML)
ThreeJS 3D高级教程
该课程是在ThreeJS 3D基础版的提升，学习基础版以后，再学习该课程，目的是帮助在ThreeJS 3D应用方面做一个技术提升，该课程实现了一些比较复杂的效果，当然这些效果实现起来也不难，只要掌握了ThreeJS 3D编程的精髓...
vue在el-table内结合v-contextmenu对行添加鼠标右键自定义菜单
期间走了不少弯路，也查阅了不少博客资料，最后终于做出来一个自己觉得还说的过去的比较像浏览器原生的自定义菜单（此处滑稽）。 首先，右击表格行可以弹出自定义菜单，选择下列菜单项可以给v-contextmenu-item添加...
JavaScript专题实例学习三 注册，js三级联动等
JavaScript专题实例学习三 这个在实际项目中用到的还是比较多的，所以如果虽然懂，但不太清楚的，不妨也来复习下。 如果觉得文章不错，对你有帮助，请作者喝杯咖啡，谢谢！如果对您有帮助 ，请多多支持.多少都是您...
学习zepto.js(Hello World)
昨天听说了zepto.js,正好最近也比较闲,所以就学习一下这个著名DOM操作库,由于本人刚接触这个,但又不想单纯的说如何使用,所以本人会按照API顺序来说明方法如何使用并试着将对于源码的理解写上来; $(): 　与jQ...
分享76个表单按钮JS特效，总有一款适合您
轻量级表格插件Bootstrap Table。Highcharts功能强大的js图表库。多种图标控件 Flotr2-master。兼容ie6的jquery圆形百分比插件。js生成的图表统计插件amcharts。json对象动态生成table表格插件。基于jQuery开发图表...
JavaScript

87,910

社区成员

224,616

社区内容

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

加载中

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

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

+ 用AI写文章