js中获取 table节点各tr及td的内容简单实例

<table id="tb1" width="200" border="1" cellpadding="4" cellspacing="0">
    <tr>
        <td height="25">第一行</td>
    </tr>
    <tr>
        <td height="25">第二行</td>
    </tr>
    <tr>
        <td height="25">第三行</td>
    </tr>
    <tr>
        <td height="25">第四行</td>
    </tr>
		 <tr>
        <td height="25"><input type="button" name="getTableContent" value="获得表格内容" onclick="getTableContent(this)"></td>
    </tr>
</table>

如上所示代码,按钮点击事件中传入this对象,此对象就是按钮本身。通过以下方法测试获取表格的数据

<script language="javascript">
    function getTableContent(node) {
// 按钮的父节点的父节点是tr。
		  var tr1 = node.parentNode.parentNode;
			alert(tr1.rowIndex);
			alert(tr1.cells[0].childNodes[0].value); //获取的方法一
alert(tr1.cells[0].innerText);
// 通过以下方式找到table对象,在获取tr,td。然后获取td的html内容
        var table = document.getElementById("tb1");//获取第一个表格

        var child = table.getElementsByTagName("tr")[rowIndex - 1];//获取行的第一个单元格

        var text = child.firstChild.innerHTML;
        window.alert("表格第" + rowIndex + "的内容为: " + text);
    }
</script>

以上就是小编为大家带来的js中获取 table节点各tr及td的内容简单实例全部内容了,希望大家多多支持我们~

时间: 2016-10-12

JS动态添加Table的TR,TD实现方法

本文实例讲述了JS动态添加Table的TR,TD实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <html>  <head> <title></title> <SCRIPT language="JavaScript"> var tempRow=0; var maxRows=0; function insertRows(){ tempRow=table1.rows.length-1; maxRows=t

js使用for循环与innerHTML获取选中tr下td值

function getParentEl (el, tagName) { if (!el) return el; do { el = el.parentNode; } while(el && el.tagName !== tagName); return el; } function temp(){ //得到选中row的value值 var temp=document.getElementsByName('id'); for(var i=0;i<temp.length;i++){ i

JS动态创建Table,Tr,Td并赋值的具体实现

成果库修改:      要求主题列表随成果类型改变而改变      网上查询资料后开工,在成果类型下拉框添加change()事件触发Dwr,查询主题集合--动态创建/编辑Table      概要代码如下:JS  复制代码 代码如下: //动态获取主题数据 function getzts(){     parentId = document.getElementById("bselect1").value;     if(parentId!=""){        

js遍历td tr等html元素

复制代码 代码如下: function checkuser(obj) { var obj = window.event.srcElement; var row = obj.parentElement.parentElement; var value = row.cells[0].all[0].value; var item = value.split("|"); alert(item); if (item.length > 1) { if (item[0] == "or

JavaScript获取tr td 的三种方式全面总结(推荐)

/* 第一种,原生的js,先获取table然后获取tr标签,然后遍历td */ // $('#selectIds').val(""); // var table = document.getElementById("tb_table");//获取第一个表格 // var array = table.getElementsByTagName("tr");//所有tr // for(var i = 1; i < array.length; i+

jsp跳转getRequestDispatcher()和sendRedirect()的区别

1.request.getRequestDispatcher()是请求转发,前后页面共享一个request ;response.sendRedirect()是重新定向,前后页面不是一个request. 2.RequestDispatcher.forward()是在服务器端运行;HttpServletResponse.sendRedirect()是通过向客户浏览器发送命令来完成.所以RequestDispatcher.forward()对于浏览器来说是"透明的":而HttpServlet

jsp中页面之间的跳转forward与sendRedirect的区别

页面之间的跳转可以通过两种方式实现:forward和sendRedirect. forward:可以在JSP页面中使用,可以在Servlet中实现. 在JSP页面中使用<jsp:forward page="目标文件"/>,例如要跳转到userlist.jsp,可以写: 复制代码 代码如下: <jsp:forward page="userlist.jsp"/> 在Servlet中使用RequestDispatcher的forward方法,要跳转

JSP中response.setContentType和response.setCharacterEncoding区别分析

本文实例讲述了JSP中response.setContentType和response.setCharacterEncoding区别.分享给大家供大家参考,具体如下: response.setContentType 设置发送到客户端的响应的内容类型,可以包括字符编码说明. 也就是说在服务器端坐了这个设置,那么他将在浏览器端起到作用,在你打开浏览器时决定编码方式 如果该方法在response.getWriter()被调用之前调用,那么响应的字符编码将仅从给出的内容类型中设置.该方法如果在respo

jsp下页面跳转的几种方法小结

1. RequestDispatcher.forward() 在服务器端起作用,当使用forward()时,Servlet engine传递HTTP请求从当前的Servlet或者是JSP到另外的一个Servlet.JSP 或普通HTML文件,也即你的form提交至a.jsp,在a.jsp用到了forward()重定向至b.jsp,此时form提交的所有信息在 b.jsp都可以获得,参数自动传递. 但forward()无法重定向至有frame的jsp文件,可以重定向至有frame的html文件,同

jsp和servlet中实现页面跳转的方式实例总结

本文实例总结了jsp和servlet中实现页面跳转的方式.分享给大家供大家参考,具体如下: 假设要求从test1.jsp 跳转到test2.jsp 一. jsp中跳转: 1. 使用RequestDispatcher.forward方法转发 <% RequestDispatcher rd = getServletContext().getRequestDispatcher("/test/test2.jsp"); rd.forward(request, response); %>

JSP request.setAttribute()详解及实例

 javascript request.setAttribute()详解 request.setAttribute()怎么用的? JSP1代码 String [] test=new String[2]; test[0]="1"; test[1]="2"; request.setAttribute("test",test) ; response.sendRedirect("jsp2.jsp"); JSP2代码 String te

使用MongoDB和JSP实现一个简单的购物车系统实例

本文介绍了JSP编程技术实现一个简单的购物车程序,具体如下: 1 问题描述 利用JSP编程技术实现一个简单的购物车程序,具体要求如下. (1)用JSP编写一个登录页面,登录信息中有用户名和密码,分别用两个按钮来提交和重置登录信息. (2)编写一个JSP程序来获取用户提交的登录信息并查询数据库,如果用户名为本小组成员的名字且密码为对应的学号时,采用JSP内置对象的方法跳转到订购页面(显示店中商品的种类和单价等目录信息):否则采用JSP动作提示用户重新登录(注:此页面上要包含前面的登录界面). (3

JSP实现用户登录、注册和退出功能

本文讲述使用JSP实现用户登录,包括用户登录.注册和退出功能等. 1.系统用例图 2.页面流程图 3.数据库设计 本例使用oracle数据库 创建用户表 包括id,username,password和email,共4个字段 -- Create table create table P_USER ( id VARCHAR2(50) not null, username VARCHAR2(20), password VARCHAR2(20), email VARCHAR2(50) ) tablesp

基于JSP的RSS阅读器的设计与实现方法(推荐)

阅读器访问地址:http://easyrss.tk/,欢迎体验! 阅读导览 一. 概述 二. 设计的基本概念和原理 三. 设计方案 四. 主要源代码 五. 阅读器使用说明 概述 获得信息是在人类的生活中是必不可少的环节.如果现在的社会对获得信息不快捷,那么这个社会将不会像如今这般的发达和进步.在当今网络技术相当发达的今天,大量的信息充斥在网上.现在网络越来越发达,用户在网上既能工作也能娱乐.当用户在网上需浏览很多个网站才能获取自己多需的信息时,那就感觉很累.因为现在每个网站都有很多信息,找到自己

jsp+Servlet编程实现验证码的方法

本文实例讲述了jsp+Servlet编程实现验证码的方法.分享给大家供大家参考,具体如下: 这里用到两个类,一个用于验证码实现,一个为后台Servlet验证输入是否正确: CodeUtil.java--------验证码具体实现: package util; import java.awt.Color; import java.awt.Font; import java.awt.Graphics; import java.awt.image.BufferedImage; import java.