补充：lz你还是加我一下百度hi或者qq25846111，我们具体来讨论一下
请问"[html][body][table][tbody]"是不是指
<html>
<body>
<table>
<tbody>这样的形式
如此的话，可以一级一级进行查找
// 获得所有的body元素列表（在这里将只有一个）
myDocumentElements=documentgetElementsByTagName("body");
// 我们所需要body元素是这个列表的第一个元素
myBody=myDocumentElementsitem(0);
// 现在，让我们获得body的子元素中所有的table元素
myPElements=myBodygetElementsByTagName("table");
//在这里如果需要查找指定的table可以用循环语句从item中查找,我假设取第一个
myTable=myPElementsitem(0);
//下面是重复上面的过程获得tbody
myTbody=myTablegetElementsByTagName("tbody")item(0);
当然还有其他方法，lz可以看一下这个链接
>
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8" />
<title>mainhtml</title>
<style type="text/css">
table {
width: 100%;
border: 1px solid black;
border-collapse: collapse;
}
td,th {
border: 1px solid black;
}
</style>
<script type="text/javascript" src="jquery-180minjs"></script>
<script type="text/javascript">
$ (function ()
{
var tbody = $ ('tbody');
$ ('#add')click (function ()
{
$ ('tbody tr:not(:contains("作者"))')each (function (i, dom)
{
tbodyappend ($ (this)clone ());
});
});
});
</script>
</head>
<body>
<table>
<tbody id="picture">
<tr>
<th>作者 :</th>
<td>
<ul>
<li><input style="width: 500px;" type="text" name="author[]" class="input-text" size="60" maxlength="200" value="" />
</li>
</ul></td>
</tr>
<tr>
<th>图文标题 :</th>
<td>
<ul>
<li><input style="width: 500px;" type="text" name="title[]" class="input-text" size="60" maxlength="200" value="" />
</li>
</ul></td>
</tr>
<tr>
<th>阅读原文链接 :</th>
<td>
<ul>
<li><input style="width: 500px;" type="text" name="content_source_url[]" class="input-text" size="60" maxlength="200" value="" />
</li>
</ul></td>
</tr>
<tr>
<th>图文内容 :</th>
<td>
<ul>
<li><textarea style="width: 500px; b height: 50px;" name="content[]" class="input-text" rows="2" cols="56"></textarea>
</li>
</ul></td>
</tr>
<tr>
<th>图文 :</th>
<td>
<ul>
<li><input type='file' name='pic[]'>
</li>
</ul></td>
</tr>
</tbody>
</table>
<div class="bk15"></div>
<div class="btn">
<input type="hidden" name="formhash" value="404446c9a547d166" /> <input type="button" id="add" name="action" value="添加"
style="visibility: visible; margin-left: 350px; background-color: #004499; border: none; width: 55px; height: 28px; color: #fff; margin-top: 30px;" />
</div>
</body>
</html>
先把它主页上写的特性翻译罗列如下：
可变长度分页；
动态过滤；
多列排序，带数据类型检测功能；
列宽度的智能处理；
从多种数据源获取数据（DOM，js Array, ajax file, server-side returning）；
滚动配置属性；
完整国际化支持；
jquery UI ThemeRoller支持；
经历了个2600多个单元测试，相当牢固；
有为数不少的插件支持；
免费的；
状态保存能力；
支持隐藏列；
动态创建表格的能力；
自动ajax数据加载；
自定义DOM位置；
单列过滤（这个与前面的过滤有区别么？）；
多种分页器；
无损的DOM交互；
参与排序的列高亮；
高级数据源配置；
扩展的插件支持功能；
可以用css完全配置表象；
丰富的文档；
110多个例子；
对Adobe AIR的完全支持。
引入
使用
Javascript代码
$(document)ready(function(){
$('#example')dataTable();
});
// 另一个例子
$(document)ready(function(){
$('#example')dataTable({
"bInfo": false
});
});
要注意的是，要被dataTable处理的table对象，必须有thead与tbody，而且，结构要规整（数据不一定要完整），这样才能正确处理。
以下是在进行dataTable绑定处理时候可以附加的参数：
我不知道你程序的具体情况，假如你的程序只有这四个地方显示日期，那么你可以在需要显示年份的地方弄一个span标签，专门来显示年份。
像这样：
<tr><td><div align="center">Q1'<span id="s1"></span>'</div></td>
<td><div align="center">Q2'<span id="s2"></span>'</div></td>
<td><div align="center">Q3'<span id="s3"></span>'</div></td>
<td><div align="center">Q4'<span id="s4"></span>'</div></td>
</tr>
给每个span标签一个id值，然后在你的periodChange(this)函数中对span标签进行填充！
我写的periodChange(this)函数如下：
<script type="text/javascript">function periodChange(obj){
// 获取四个span标签的DOM对象
var s1 = documentgetElementById("s1");
var s2 = documentgetElementById("s2");
var s3 = documentgetElementById("s3");
var s4 = documentgetElementById("s4");
// 获取select被选中的值
var selvalue= objoptions[objoptionsselectedIndex]value;
// 填充
s1innerHTML = selvalue;
s2innerHTML = selvalue;
s3innerHTML = selvalue;
s4innerHTML = selvalue;
}
</script>
呵呵，那是因为<table><tbody><tr><td></td></tr></tbody></table>习惯上，我们常常吧tbody 省略，但是在dom中他默认有tbody这一层，所以你那个lastChild其实取到的是tbody这一层
documentwrite(skouterHTMLreplace('<','& lt;')replace('>','& gt;'));
<>这个需要转义啊，& lt; & gt;（实际&后面的空格是没有的）
参考以下代码：
注意需要导入jqueryjs
<!DOCTYPE html><html>
<head>
<title>购物车----jQuery</title>
<meta charset="utf-8" />
<style type="text/css">
h1 {
text-align:center;
}
table {
margin:0 auto;
width:60%;
border:2px solid #aaa;
border-collapse:collapse;
}
table th, table td {
border:2px solid #aaa;
padding:5px;
}
th {
background-color:#eee;
}
</style>
<script type="text/javascript" src="/js/jqueryjs"></script>
<script type="text/javascript">
function add_shoppingcart(btn){//将btn(dom)转换为jQuery对象
//先获取商品名字和单价还有库存以备后面使用
var $tds = $(btn)parent()siblings();
//$tdseq(0)是jQuery对象 $tds[0]是DOM对象
var name = $tdseq(0)html();//string
var price = $tdseq(1)html();//string
var stock = $tdseq(3)html();//string
//查看库存是否还有<=0
if(stock <= 0){
return;
}
//无论购物车中是否有该商品,库存都要-1
$tdseq(3)html(--stock);
//在添加之前确定该商品在购物车中是否存在,若存在,则数量+1,若不存在则创建行
var $trs = $("#goods>tr");
for(var i=0;i<$trslength;i++){
var $gtds = $trseq(i)children();
var gName = $gtdseq(0)html();
if(name == gName){//若存在
var num = parseInt($gtdseq(2)children()eq(1)val());
$gtdseq(2)children()eq(1)val(++num);//数量+1
//金额从新计算
$gtdseq(3)html(pricenum);
return;//后面代码不再执行
}
}
//若不存在,创建后追加
var li =
"<tr>"+
"<td>"+name+"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='-' onclick='decrease(this);'/> "+
"<input type='text' size='3' readonly value='1'/> "+
"<input type='button' value='+' onclick='increase(this);'/>"+
"</td>"+
"<td>"+price+"</td>"+
"<td align='center'>"+
"<input type='button' value='x' onclick='del(this);'/>"+
"</td>"+
"</tr>";
//追加到#goods后面
$("#goods")append($(li));
//总计功能
total();
}
//辅助方法--单击购物车中的"+" "-" "x"按钮是找到相关商品所在td,以jQuery对象返回
function findStock(btn){
var name = $(btn)parent()siblings()eq(0)html();//获取商品名字
//注意table默认有行分组,若此处使用 $("#table1>tr:gt(0)")则找不到任何tr
var $trs = $("#table1>tbody>tr:gt(0)");
for(var i=0;i<$trslength;i++){
var fName = $trseq(i)children()eq(0)html();
if(name == fName){//找到匹配的商品
return $trseq(i)children()eq(3);
}
}
}
//增加"+"功能
function increase(btn){
//获取该商品库存看是否<=0
var $stock = findStock(btn);
var stock = $stockhtml();
if(stock <= 0){
return;
}
//库存-1
$stockhtml(--stock);
//购物车数据改变
var $td = $(btn)prev();
var num = parseInt($tdval());//number
//num此时为number类型(在计算时会自动转换为number类型)
$tdval(++num);
//获取单价,再加计算前要先转换为number类型
var price = parseInt($(btn)parent()prev()html());
$(btn)parent()next()html(numprice);
//总计功能
total();
}
//减少"-"功能
function decrease(btn){
//该商品数量=1时候不能再减少
var num = parseInt($(btn)next()val());
if(num <= 1){
return;
}
var $stock = findStock(btn);
//库存+1
var stock = $stockhtml();
$stockhtml(++stock);
//商品数量-1
$(btn)next()val(--num);
//从新计算金额
var price = parseInt($(btn)parent()prev()html());
$(btn)parent()next()html(pricenum);
//总计功能
total();
}
//"x"删除按钮功能
function del(btn){
//将商品数量归还库存
var $stock = findStock(btn);
var stock = parseInt($stockhtml());
var num = parseInt($(btn)parent()prev()prev()children()eq(1)val());
$stockhtml(num + stock);
//清空改行商品列表
$(btn)parent()parent()remove();
//总计功能
total();
}
//总计功能
function total(){
//获取所有购物车中的trs
var $trs = $("#goods tr");
var amount = 0;
for(var i=0;i<$trslength;i++){
var money = parseInt($trseq(i)children()eq(3)html());
amount += money;
}
//写入总计栏
$("#total")html(amount);
}
</script>
</head>
<body>
<h1>真划算</h1>
<table id="table1">
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>颜色</th>
<th>库存</th>
<th>好评率</th>
<th> *** 作</th>
</tr>
<tr>
<td>罗技M185鼠标</td>
<td>80</td>
<td>黑色</td>
<td>5</td>
<td>98%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>微软X470键盘</td>
<td>150</td>
<td>黑色</td>
<td>9028</td>
<td>96%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>洛克iphone6手机壳</td>
<td>60</td>
<td>透明</td>
<td>672</td>
<td>99%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>蓝牙耳机</td>
<td>100</td>
<td>蓝色</td>
<td>8937</td>
<td>95%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
<tr>
<td>金士顿U盘</td>
<td>70</td>
<td>红色</td>
<td>482</td>
<td>100%</td>
<td align="center">
<input type="button" value="加入购物车" onclick="add_shoppingcart(this);"/>
</td>
</tr>
</table>
<h1>购物车</h1>
<table>
<thead>
<tr>
<th>商品</th>
<th>单价(元)</th>
<th>数量</th>
<th>金额(元)</th>
<th>删除</th>
</tr>
</thead>
<tbody id="goods">
</tbody>
<tfoot>
<tr>
<td colspan="3" align="right">总计</td>
<td id="total"></td>
<td></td>
</tr>
</tfoot>
</table>
</body>
</html>
最终效果图:
以上就是关于关於 javascript 中的定位元素的问题全部的内容，包括:关於 javascript 中的定位元素的问题、使用<tbody>标签,在低版本浏览器中,会不会不显示<tbody></tbody>间的内容、jquery复制对象 点击添加按钮，复制tbody里面除了作者以外所有的tr元素到后面，求大神！等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）