最近在写一个项目，用到这样一个Javascript功能，
将一个table分成几段，能够动态的插入行和列，自然而然就想到appendChild方法，但是发现在IE和FF里面，两个方法并不能通用，后来经过分析，使用tbody就可以解决这样的问题。
而且一个table 可以分成几个tbody,达到在不同的位置插入行的目的，如下代码所示:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script>
function add(i){
var tt = document.getElementById("tt");
/*var newTr = tt.insertRow(i);
var newTd0 = newTr.insertCell(-1);
newTd0.innerHTML="<input type='text'/>";*/
var r = document.createElement("tr");
var t = document.createElement("td");
t.innerHTML="ffffffffffffffffff";
r.appendChild(t);
tt.appendChild(r);
}
function add1(i){
var tt = document.getElementById("tt1");
/*var newTr = tt.insertRow(i);
var newTd0 = newTr.insertCell(-1);
newTd0.innerHTML="<input type='text'/>";*/
var r = document.createElement("tr");
var t = document.createElement("td");
t.innerHTML="ffffffffffffffffff";
r.appendChild(t);
tt.appendChild(r);
}
</script>
</HEAD>
<BODY>
<input type="button" name="add 2" onclick="add(2)">
<input type="button" name="add 4" onclick="add1(-1)">
<table border=1 width=100%>
<!--这里一个-->
<tbody id="tt">
</tbody>
<tr>
<td>111</td>
</tr>
<tr>
<td>2222222222</td>
</tr>
<tr>
<td>3333</td>
</tr>
<!--这里又一个-->
<tbody id="tt1">
</tbody>
<tr>
<td>44</td>
</tr>
</table>
</BODY>
</HTML>
另在加上一个右键菜单的功能，发现使用DOM 的 setAttribute方法，很有用处。
-----------------------------------------------------------------------------
<form id= "Form1 " method= "post " runat= "server ">
<INPUT type= "text " name= "city ">
</form>
Head之间有一段js，其中有一个变量city，我用alert(city);可以得到值，但是怎么在js中把这个值赋给这个html控件？
document.all.city.value=city;试过了，不行。
<form id= "Form1 " method= "post " runat= "server "> 这个form也去掉了，不行。
method= "post " runat= "server "这句也去了，不行。
<INPUT type= "text " name= "city " id= "city ">
注意要加上 id= "city "
脚本楼上的都对。
分享到：
相关推荐
`在某些较旧的浏览器中可能不支持，可以考虑使用JavaScript库如`sticky-header`或者`position-sticky polyfill`来实现兼容。 在实际项目中，可以创建一个自定义的Bootstrap CSS类，比如`.table-fixed`，然后将其...
### tbody标签的作用和妙用 在HTML表格的标签中，tbody标签用于包含表格的主体部分的内容。通过使用tbody，可以将表格划分成多个部分，这样每个部分可以单独下载。这种特性尤其在表格内容较多的时候非常有用，因为...
table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table表格，让thead固定，tbody有滚动条，关键是都对齐的纯css写法。table...
但是，在使用tbody元素时需要注意一些方法，以避免出现错误。 首先，需要注意tbody元素的嵌套结构。在 HTML 中，tbody元素可以嵌套tr元素，而tr元素可以嵌套td元素。因此，在使用tbody元素时，需要正确地嵌套这些...
在CSS中，为了使tbody可以滚动，我们通常会使用`overflow-y`属性，并将其值设置为`scroll`。这样当内容超过tbody设定的高度时，就会出现垂直滚动条。为了让滚动更加平滑和具有弹性效果，可以添加`-webkit-overflow-...
为了解决这个问题，可以使用负的 `margin` 或其他 CSS 技巧来调整 `thead` 与 `tbody` 之间的间距，使其看起来更像传统的表格。 此外，这种方法可能不适用于某些旧版浏览器或非主流浏览器，因此在实际应用时，需要...
5. **删除tbody元素**: 使用`removeChild`方法删除指定索引的`<tbody>`元素。 #### 实际应用案例 假设我们有如下HTML结构： ```html <tbody> <td>Row 1, Column 1 <td>Row 1, Column 2 </tbody> <tbody>...
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 表格的分组显示(Structured Table) （IExplore Only） 一、按行分组 <thead> … </thead> – 表的题头(Header) <tbody> … </tbody> – 表的正文(Body) ...
表格的分组显示(Structured Table) （IExplore Only） 1）按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) 例： <table> <thead
在IE6到IE9这四个版本的Internet Explorer浏览器中，存在一个与DOM操作相关的兼容性问题，即不能直接通过`innerHTML`属性来设置`<tbody>`元素的内容。这个问题主要是由于这些旧版本的IE浏览器对HTML标准的支持不完整...
本文将着重讨论在制作原型页面时，tbody标签的使用技巧以及其在JavaScript前台编程中的实际应用。 首先，需要明确的是，基于BS结构（Browser-Server结构）的项目，前端页面的交互效果很大程度上需要在UI设计阶段...
总结起来，正确使用 `<thead>`、`<tfoot>` 和 `<tbody>` 标签是创建高效、易读且可访问的 HTML 表格的关键。它们不仅可以提供清晰的表格结构，还能通过 CSS 配合实现高级交互效果，提升用户体验。在编写网页时，应尽...
在本例中，我们关注的是如何在Bootstrap的表格（table）中实现表头（thead）固定而tbody部分滚动的效果。这种效果对于展示大量数据时特别有用，因为它允许用户在滚动浏览长列表时始终保持列标题可见。 首先，让我们...
当表格头部固定时，需要分为两个表格来做：一部分是thead，一部分是tbody，具体实现方式如下： html代码： <th><div>标题一</div></th> <th><div>标题二</div></th> <th><div>标题三</div></th> <th>...