導航:首頁 > 編程語言 > js獲取table當前tr行的值

js獲取table當前tr行的值

發布時間:2023-03-29 16:54:19

A. js獲得table行中列的值,就是checkbox如何獲得選中那個獲得相應的值

你可以使用 javaScript 中自帶的 rowIndex 和 cellIndex 來獲取行和列的鍵值 (從0開始)

點擊 checkbox,獲取 parentNode (也就是 td),td.cellIndex 就是所在列的鍵值
點擊 checkbox,獲取 parentNode.parentNode (也就是 tr),tr.rowIndex 就是所在行的鍵值

<script type="text/javascript">
// 點擊
document.onclick = function(e) {
// 兼容 event 和 target
e = e || window.event;
var target = e.target || e.srcElement;
// 確認是 checkbox
if(target.tagName.toLowerCase() === "input"
&& target.type === "checkbox") {
// 獲取行列鍵值
var row_num = target.parentNode.parentNode.rowIndex;
var col_num = target.parentNode.cellIndex;
// 輸出
alert(row_num + " " + col_num);
}
};
</script>

因為鍵值是從 0 開始,一般需要 +1 才是行列數,但因為你表單中第一行個第一列都是文字,所以不需要 +1 正好輸出需要的數字,例如點擊周四 + 6,會輸出 4 6

B. js獲取table當前tr行第二列td的值

在a標簽上寫個class,用jq寫的
$(".a標簽的class").click(function(){
var text = $(this).parent("td").siblings("td").text();
alert(text)
})

C. 在js中怎樣獲取當前頁面表格中的數據

1、JS獲取表格的簡便方法:獲取tbody:tBodies 獲取thead:tHead 獲取tfoot:tFoot 獲取行tr:rows 獲取列td:cells

使用實例: oTable.tBodies[0] oTable.tHead[0] oTable.tFoot[0] oTable.rows[1] oTable.cells[1]

2、遍歷
var oTable=document.getElementById("表格id");
oTable.tBodies[0]可以看成是rows和cells組成的二維數組,用兩個for循環嵌套遍歷一下就可以了

D. 如何用javascript獲取表格中一行的值

1、簡單的,表格中的一行添加id屬性

varitem=document.getElementById("id");

2、在行本身綁定方法將自身作為參數傳遞

<html>
<head>
<scripttype='text/javascript'>
varcurRow; //全局行號
varcurRowId;//選中行的記錄信息的ID
varcurColor;
functionselectRow(tr){//tr行本身
curRow=tr;
curRowId=tr.id;
alert(tr.cells[0].innerText);
}
</script>
</head>
<bodyonload="javascript:selectRow(1)">
<tableborder="1solid">
<tronclick="selectRow(this);">
<td>001</td>
<td>google</td>
</tr>
<tronclick="selectRow(this);">
<td>002</td>
<td></td>
</tr>
</table>
</body>
</html>

3、獲取所有行集合,然後通過下標訪問某一行

varitems=document.getElementByTagName("tr");
//獲取某一行(下標從0開始,到items.length-1結束)
varhang=items[0];

E. js怎麼獲取表格中指定行某一列的值

jQuery 遍歷的 eq() 方法將匹配元素集縮減值指定 index 上的一個,index表示元素的位置(最小為 0)。所以獲取Table第 i 行第 j 列的內容可用如下代碼

$("table").find("tr").eq(i-1).find("td").eq(j-1).text(); // 注意-1是因為index從0開始計數。

F. jsp,js如何獲取table的當前行的某單元格的值

<!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/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>動態表格</title>

</head>

<body>

<p>動態表格徹底研究</p>

<p>對表格單元格的添加刪除修改並對其進行移動以及拷貝等操作,是目前應用開發中常用的技術</p>

<p>

<input type="button" name="Submit" value="刷新" onclick="onRefresh()" />

<input type="button" name="Submit2" value="全選" onclick="selectall()"/>

<input type="button" name="Submit8" value="反選" onclick="inverse()" />

<input type="button" name="Submit3" value="不選" onclick="noselect()"/>

<input type="button" name="Submit4" value="添加行與列" onclick="insert_row()" />

<input type="button" name="Submit7" value="刪除選擇" onclick="delRow()" />

<input type="button" name="Submit5" value="拷貝選擇" onclick="Row()"/>

<input type="button" name="Submit92" value="居中對齊" onclick="tableAlign()"/>

<input type="button" name="Submit922" value="隔行變色" onclick="changeColor()"/>

</p>

<table width="50%" border="1" cellpadding="1" cellspacing="2" bordercolor="#CCCCCC" id="myTable">

<tr>

<td width="7%">

<label>

<input type="checkbox" name="checkbox" value="checkbox" />

</label> </td>

<td width="51%">1</td>

<td width="14%">1</td>

<td width="14%">1</td>

<td width="14%">1</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox2" value="checkbox" /></td>

<td>2</td>

<td>2</td>

<td>2</td>

<td>2</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox3" value="checkbox" /></td>

<td>3</td>

<td>3</td>

<td>3</td>

<td>3</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox4" value="checkbox" /></td>

<td>4</td>

<td>4</td>

<td>4</td>

<td>4</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox5" value="checkbox" /></td>

<td>5</td>

<td colspan="2">55</td>

<td>5</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox6" value="checkbox" /></td>

<td>6</td>

<td>6</td>

<td>6</td>

<td>56</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox7" value="checkbox" /></td>

<td>777</td>

<td>7</td>

<td>77</td>

<td>7</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox8" value="checkbox" /></td>

<td>88</td>

<td>8</td>

<td>88</td>

<td>77</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox9" value="checkbox" /></td>

<td>999</td>

<td>99</td>

<td>99</td>

<td>999</td>

</tr>

<tr>

<td><input type="checkbox" name="checkbox10" value="checkbox" /></td>

<td>10</td>

<td>10</td>

<td>10</td>

<td>10</td>

</tr>

</table>

<br />

<p></p>

<script type="text/javascript">

var form = document.forms["form1"];

var table = document.getElementById("myTable");

var selectBox = table.getElementsByTagName("input");

var tr = table.getElementsByTagName("tr");

var clicked = true;

function insert_row(){

//alert(table.rows[0].cells.length)

var thisrow = table.insertRow(0);

var thiscell = thisrow.insertCell(0);

thiscell.innerHTML = "<input type="checkbox" name="checkbox10" value="checkbox" />";

var thiscell1 = thisrow.insertCell(1);

thiscell1.innerHTML = "cell";

var thiscell2 = thisrow.insertCell(2);

thiscell2.innerHTML = "cell";

var thiscell3 = thisrow.insertCell(3);

thiscell3.innerHTML = "cell";

var thiscell4 = thisrow.insertCell(4);

thiscell4.innerHTML = "cell";

thiscell4.align = "center";

}

function insert_Cell(){

var y = table.rows[0].insertCell(0);

y.colSpan="2";

y.innerHTML = "sssss";

}

function selectall(){

for(i=0;i<selectBox.length;i++){

selectBox[i].checked = true;

}

}

function noselect(){

for(i=0;i<selectBox.length;i++){

selectBox[i].checked = false;

}

}

function inverse(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked){

selectBox[i].checked = false;

}else{

selectBox[i].checked = true;

}

}

}

function delRow(){

for(i=selectBox.length-1;i>=0;i--){

//alert(typeof(selectBox[i]));

if(selectBox[i].checked){

table.deleteRow(i);

}

}

}

function onRefresh(){

location.reload();

}

function Row(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked){

//var table = document.getElementById("Table");

var tablerow = table.insertRow(table.rows.length);

tablerow.innerHTML = table.rows[i].innerHTML;

}

}

}

function tableAlign(){

for(i=0;i<selectBox.length;i++){

if(selectBox[i].checked && clicked){

table.rows[i].align = "center";

}

}

}

function changeColor(){

var skip = true;

for(i=0;i<tr.length;i++){

if(skip){

tr[i].bgColor = "#cccccc";

skip = false;

}else{

tr[i].bgColor = "#ffffff";

skip = true;

}

}

}

</script>

</body>

</html>


運行效果:

G. js獲取table裡面<tr>一整行的信息

給tr一個id,然後獲取

//XX是id,string是獲得的值
var row = document.getElementById('XX');
var string = row.innerHTML;

H. js 通過td的id值 如何拿到tr的id值(動態獲取)

錯誤出在document.getElementById(dd)
因為頁面上id為2的出現了多個,而這樣獲取只會取到第一個,所以tr始終為相應的第1個.

按照你的寫法,用dd來保存tr的行數比較好,即i值。
然後通過document.all.table1.rows(i).id來獲取tr的id值。

I. 怎麼用JavaScript獲取table某行數據

表格的第一行為thead中的th

剩下的數據放到tbody中

最後那一行添加的放到tfoot中

對tbody下面的所有tr綁定一個點擊事件

事件中獲取這個tr下的所有td,就可以獲取這行的數據了

大概代碼如下:

var trs =document.getElementById("tbodyId").getElementsByTagName("tr");

for(int i=0;i<=trs.length;i++)
{
var tr = trs[i];
var tds=tr.getElementsByTagName("td");
//下面遍歷tds就可以去獲取數據了
//把數據放到下面的表單就好了
//然後提交數據,在服務端進行修改
}

閱讀全文

與js獲取table當前tr行的值相關的資料

熱點內容
maya粒子表達式教程 瀏覽:84
抖音小視頻如何掛app 瀏覽:283
cad怎麼設置替補文件 瀏覽:790
win10啟動文件是空的 瀏覽:397
jk網站有哪些 瀏覽:134
學編程和3d哪個更好 瀏覽:932
win10移動硬碟文件無法打開 瀏覽:385
文件名是亂碼還刪不掉 瀏覽:643
蘋果鍵盤怎麼打開任務管理器 瀏覽:437
手機桌面文件名字大全 瀏覽:334
tplink默認無線密碼是多少 瀏覽:33
ipaddgm文件 瀏覽:99
lua語言編程用哪個平台 瀏覽:272
政采雲如何導出pdf投標文件 瀏覽:529
php獲取postjson數據 瀏覽:551
javatimetask 瀏覽:16
編程的話要什麼證件 瀏覽:94
錢脈通微信多開 瀏覽:878
中學生學編程哪個培訓機構好 瀏覽:852
榮耀路由TV設置文件共享錯誤 瀏覽:525

友情鏈接