JS选中checkbox后获取table内一行TD所有数据的方法

本文实例讲述了JS选中checkbox后获取table内一行TD所有数据的方法。分享给大家供大家参考。具体实现方法如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
 <title>Untitled</title>
 <script>
  function test(o) {
   if (!o.checked) {
    return;
   }
   var tr = o.parentNode.parentNode;
   var tds = tr.cells;
   var str = "you click ";
   for(var i = 0;i < tds.length;i++){
    if (i < 3) {
     str = str + tds[i].innerHTML + "--";
    }
   }
   alert(str);
  }
 </script>
</head>
<body>
<table width="60%" cellspacing="0" cellpadding="0" align="left" border="1" bordercolordark="#ffffff" bordercolorlight="#B3B5B4" >
 <tbody id="tabstore1">
  <tr>
   <td>b1</td>
   <td>b2</td>
   <td>b3</td>
   <td><input type="checkbox" onclick="test(this);"/></td>
  </tr>
  <tr>
   <td>c1</td>
   <td>c2</td>
   <td>c3</td>
   <td><input type="checkbox" onclick="test(this);"/></td>
  </tr>
 </tbody>
</table>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

赞 (0)

相关推荐

  • js简单实现竖向tab选项卡的方法

    本文实例讲述了js简单实现竖向tab选项卡的方法.分享给大家供大家参考.具体如下: 选项卡占据左边,而内容放在右边,一个适合新手的竖向的tab选项卡特效例子 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html lang="ru"> <head> <title>

  • js实现的简洁网页滑动tab菜单效果代码

    js实现的简洁网页滑动tab菜单效果代码

    本文实例讲述了js实现的简洁网页滑动tab菜单效果代码.分享给大家供大家参考.具体如下: 这里介绍的是一款风格简洁的网页滑动门代码,基于JS和Div+CSS实现.滑动门菜单,只需鼠标放上去就切换的菜单,和网页选项卡只是操作形式上的不同而已,滑动门改选项卡只需将门菜单中的onmouseover换成onclick就行了,这样换了之后,切换内容需要鼠标点击门菜单才可以. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-css-div-hd-tab

  • js+css实现tab菜单切换效果的方法

    本文实例讲述了js+css实现tab菜单切换效果的方法.分享给大家供大家参考.具体实现方法如下: index.css如下: 复制代码 代码如下: * {      margin: 0px;      padding: 0px;  }  body {      width: 600px;      margin: 0 auto;      background-color: silver;  }    #contanier {      background-color: yellow;     

  • 原生js与jQuery实现简单的tab切换特效对比

    tab页签通常适用于空间有限而内容较多同时兼顾页面美观度不给用户一种信息过量视觉疲劳的情形.使用面非常广,下面我们用两种方法简单实现之. 首先,构建页面元素.页签的可点击部分我们通常用列表来承载,包括ul和ol,我们这里让页签呈横向分布,所以需要使之向左浮动.而页签内容部分使用div承载即可.另外,我们需要对具有共性的元素统一控制样式和行为,所以就有了下面的dom结构: <div id="main"> <ul id="tabbar" class=&

  • js实现点击切换TAB标签实例

    js实现点击切换TAB标签实例

    本文实例讲述了js实现点击切换TAB标签.分享给大家供大家参考.具体如下: 这里演示的选项卡效果代码,无jq,纯JS来实现,灰色风格,没有怎么美化,或许看上去比较普通,不过兼容性和操作起来挺舒服的,风格适用于大部分的网站,或许你会用得上. 先来看看运行效果截图: 在线演示地址如下: http://demo.jb51.net/js/2015/js-tab-click-cha-menu-codes/ 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTM

  • js实现鼠标感应向下滑动隐藏菜单的方法

    本文实例讲述了js实现鼠标感应向下滑动隐藏菜单的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html> <head> <title>隐藏在网页左上角感应鼠标向下滑出的隐藏菜单</title> <style>#D1 {     BACKGROUND-COLOR: blue;     BORDER-BOTTOM: white 2px outset;     BORDER-LEFT: white 2px outset;   

  • js实现滑动触屏事件监听的方法

    本文实例讲述了js实现滑动触屏事件监听的方法.分享给大家供大家参考.具体实现方法如下: function span_move_fun(){ var span = document.getElementById("move_k"); var span_left = $(span).offset().left; var span_top = $(span).offset().top; var start_left = $(span).offset().left; var start_top

  • js实现支持手机滑动切换的轮播图片效果实例

    js实现支持手机滑动切换的轮播图片效果实例

    本文实例讲述了js实现支持手机滑动切换的轮播图片效果的方法.分享给大家供大家参考.具体如下: 运行效果如下: 完整实例代码点击此处本站下载. 使用方法案例: <script type="text/javascript" src="../src/zepto.js"></script> <script type="text/javascript" src="../src/carousel-image.js&qu

  • 简单纯js实现点击切换TAB标签实例

    简单纯js实现点击切换TAB标签实例

    一个不需要jQuery实现的tab选项卡切换效果,代码简洁易用. 默认是鼠标悬停显示tab效果,可将其中的onmouseover 修改为 onclick 点击效果 使用方法: 1.将附件中的index.html中的css样式以及代码部分拷贝到你需要的地方即可 相关链接:几行简单的jQuery代码搞定tab标签切换效果 展示效果图: 效果展示  源码下载 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" &

  • JS选中checkbox后获取table内一行TD所有数据的方法

    本文实例讲述了JS选中checkbox后获取table内一行TD所有数据的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"

  • vue .js绑定checkbox并获取、改变选中状态的实例

    如下所示: 1.html <div class="weui-cells weui-cells_checkbox font14" v-for="item in items"> <label class="weui-cell weui-check__label"> <div class="weui-cell__ft width-inherit"> <input type="che

  • js与jQuery实现获取table中的数据并拼成json字符串操作示例

    本文实例讲述了js与jQuery实现获取table中的数据并拼成json字符串操作.分享给大家供大家参考,具体如下: 核心代码如下: JavaScript代码: function tabToJSON(id) { var trs = document.getElementById(id).getElementsByTagName("tr");//获得tr数组 var titles = trs[0].getElementsByTagName("td"); //获得表头t

  • jquery获取table指定行和列的数据方法(当前选中行、列)

    实例如下: //不多说,直接上代码. $("table tr").click(function() {//为表格的行添加点击事件 var tr = $(this);//找到tr原色 var td = tr.find("td");//找到td元素 alert(td[0].innerHTML);//指定下标即可 }) 今日项目中需要用到取table选中列的数据,网上资料发现都不能获取到选中指定列的数据,通过分析测试后总结出以上代码,可以获取选中行/列的数据.取td的数据

  • JS获取子窗口中返回的数据实现方法

    在开发的时候,遇到了这样一个问题,客户填写自己的收货地址,可以新建,但同时也可以选择之前填写的,由于我们的客户本身就是商户,地址繁多,把它之前的地址简单用个下拉框罗列出来显然不合适,并且客户要求能够对地址通过姓名筛选,这样,选择地址就必须再开一个小窗来完成了,那么,小窗中填写的值怎么回传呢? js有个方法showModalDialog在这种情况下用的就比较多了,其作用是打开一个模态窗口,什么事模态窗口?就是打开后不能操作父窗口,只有子窗口操作完了,关闭了,才可以继续父窗口的动作.回到最开始的问题

  • JS实现在线统计一个页面内鼠标点击次数的方法

    本文实例讲述了JS实现在线统计一个页面内鼠标点击次数的方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/x

  • java获取两个数组中不同数据的方法

    本文实例讲述了java获取两个数组中不同数据的方法.分享给大家供大家参考.具体实现方法如下: public static <T> List<T> compare(T[] t1, T[] t2) { List<T> list1 = Arrays.asList(t1); List<T> list2 = new ArrayList<T>(); for (T t : t2) { if (!list1.contains(t)) { list2.add(t)

  • 对Vue table 动态表格td可编辑的方法详解

    项目中需求用到可编辑表格 下图这种 ↓ element UI 组件table表格中 增加template 模版 翻入input 根据业务逻辑增加全局变量 isEdit 是否变化. <el-table-column label="名称" width="140"> <template scope="scope"> <el-input v-if="scope.row.isEdit && scope

  • php循环table实现一行两列显示的方法

    <table width="100%" border="0" cellspacing="1" cellpadding="0" style="background:#CCC"> <tr> <td align="center" bgcolor="#FFFFFF">第一列</td> <td align="cen

  • Android部分手机拍照后获取的图片被旋转问题的解决方法

    调用Android系统拍照功能后,三星手机拍摄后的照片被旋转了90度,横着拍给你变成竖的,竖的拍给你变成横的.其它品牌的手机都是正常的,就三星出现这个怪事. 在Android适配上,我原来一直以为国内的小米手机够奇葩了,结果还有更奇葩的!你说你没事旋转照片干啥,实在是猜不透其居心何在,纯粹是在给开发者制造麻烦啊! 解决办法是获取到拍照后照片被旋转的角度,再旋转回去就好了. 具体思路: 1.首先在调用拍照方法时,保存拍照后的相片原图,得到原图路径,(PhotoBitmapUtils是我自己写的一个

随机推荐