怎么用JQuery取得Table的所有行的第一列

怎么用JQuery取得Table的所有行的第一列,第1张

<!DOCTYPE HTML>

<html lang="en-US">

<head>

<meta charset="UTF-8">

<title>Ball</title>

<style type="text/css">

</style>

<script type="text/javascript" src="jquery-180minjs"></script>

<script type="text/javascript">

$ (function ()

    {

    $ ("table tr :nth-child(1)")each (function (i, dom)

    {

    alert ($ (this)html ());

    });

    });

</script>

</head>

<body>

<table>

<tr>

<th>111</th>

<th>333</th>

</tr>

<tr>

<td>222</td>

<td>355</td>

</tr>

</table>

</body>

</html>

首先 datatable 需要构建 datacolumn

datatable dt=new datatable();

dtcolumnsadd(new datacolumn("列名"))

添加数据方法()

datarow dr=dtnewRows();

dr["xxx"]=xxx;

dtRowsAdd(dr);

1、在html中定义一个表格table,并且给其这只一个id

2、定义一个js函数,在函数中利用jquery的链式语法获取table下的所有td

3、结果得到一个包含table下的所有td的数组

示例:

html代码

<table id="mytable">

    <tr><td>第一行</td></tr>

    <tr><td>第二行</td></tr>

    <tr><td>第三行</td></tr>

</table>

js代码:

function getAllTd(){

    var tdArr = $('#mytable tr td');

    alert(tdArrlength);

}

javascript提供了获取表格中某一行单元格数的代码,参考如下:

documentgetElementById('first')cellslength  // 获取id为first的行的单元格数目

实例演示如下:

创建Html元素

<div class="box">

<span>实例演示:获取表格第一行的单元格数量</span><br>

<div class="content">

    <table>

        <tr id="first"><td>1</td><td>2</td><td>3</td></tr>

        <tr><td>4</td><td>5</td><td>6</td></tr>

        <tr><td>7</td><td>8</td><td>9</td></tr>

    </table>

    <input type="button" value="获取表格第一行的单元格数量" onclick="fun_get()">

</div>

</div>

简单设置一下css样式

divbox{width:300px;padding:20px;margin:20px;border:4px dashed #ccc;}

divbox>span{color:#999;font-style:italic;}

divcontent{width:250px;margin:10px 0;padding:20px;border:2px solid #ff6666;}

table{border-collapse:collapse;}

td{width:80px;height:30px;line-height:30px;text-align:center;border:1px solid green;}

编写jquery代码

<script>

function fun_get(){

alert(documentgetElementById('first')cellslength);

}

</script>

观察效果

已经写好,亲测可用

<html>

<head>

<meta charset="utf-8">

    <title>Index</title>

    <!-- 新 Bootstrap 核心 CSS 文件 -->

    <link rel="stylesheet" href=">

获取行号,有这种方式:

var rowid = $("#grid-table")jqGrid("getGridParam", "selrow");

最后先在js最外部定义一个变量selId,然后使用如下代码在选中行时赋值:

onSelectRow: function (rowid, status) {

selId = rowid;//给最外层的selId赋值

}

用JQuery获取表格最后一行或一列的代码例子

代码如下:

$('#mytable tr:last')find('td')addClass('end');

$('#mytable tr')find('td:last')addClass('end');

获取倒数第二行

代码如下:

$("#tbData tr")get($("#tbData tr")length - 2);

$("#tbData tr")eq(-2);

1、首先输入下方的代码:

<%@ page language="java" pageEncoding="UTF-8"%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 401 Transitional//EN">

<html>

<head>

<title>利用jquery给指定的table添加一行、删除一行</title>

<meta >

<meta >

<meta >

<meta >

<meta >

<script type="text/javascript"

src="<%=requestgetContextPath()%>/js/jquery-151js"></script>

<script type="text/javascript">

2、然后在输入下方的代码:

////////添加一行、删除一行封装方法///////

/

为table指定行添加一行

tab 表id

row 行数,如:0->第一行 1->第二行 -2->倒数第二行 -1->最后一行

trHtml 添加行的html代码

/

function addTr(tab, row, trHtml){

//获取table最后一行 $("#tab tr:last")

//获取table第一行 $("#tab tr")eq(0)

//获取table倒数第二行 $("#tab tr")eq(-2)

var $tr=$("#"+tab+" tr")eq(row);

if($trsize()==0){

alert("指定的table id或行数不存在!");

return;

}

$trafter(trHtml);

}

3、然后在输入下方的代码:

function delTr(ckb){

//获取选中的复选框,然后循环遍历删除

var ckbs=$("input[name="+ckb+"]:checked");

if(ckbssize()==0){

alert("要删除指定行,需选中要删除的行!");

return;

}

ckbseach(function(){

$(this)parent()parent()remove();

});

}

/

全选

allCkb 全选复选框的id

items 复选框的name

/

function allCheck(allCkb, items){

$("#"+allCkb)click(function(){

$('[name='+items+']:checkbox')attr("checked", thischecked );

});

}

////////添加一行、删除一行测试方法///////

$(function(){

//全选

allCheck("allCkb", "ckb");

});

function addTr2(tab, row){

var trHtml="<tr align='center'><td width='30%'><input type='checkbox' name='ckb'/>

</td><td width='30%'>地理</td><td width='30%'>60</td></tr>";

addTr(tab, row, trHtml);

}

function delTr2(){

delTr('ckb');

}

4、然后输入下方的代码:

</script>

</head>

<body>

<table border="1px #ooo" id="tab" cellpadding="0"

cellspacing="0" width="30%">

<tr align="center">

<td width="30%"><input id="allCkb" type="checkbox"/></td>

<td width="30%">科目</td>

<td width="30%">成绩</td>

</tr>

<tr align="center">

<td width="30%"></td>

<td width="30%">语文</td>

<td width="30%">80</td>

</tr>

</table>

<input type="button" onclick="addTr2('tab', -1)" value="添加">

<input type="button" onclick="delTr2()" value="删除">

</body>

</html>

5、然后这样就完成了。

以上就是关于怎么用JQuery取得Table的所有行的第一列全部的内容,包括:怎么用JQuery取得Table的所有行的第一列、js Jquery-datatable 我想在表格外取得datatable里的所有行的数据、jquery怎么获取到table的每一个td(table是一列多行的)等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/web/9354749.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-27
下一篇 2023-04-27

发表评论

登录后才能评论

评论列表(0条)

保存