js怎样获得table样式

js怎样获得table样式,第1张

创建和插入例子,按需自改

/ 创建表格 id 为表格id arr 为表格表头 / function createTable(id,arr){ var table = documentcreateElement('table'); tablesetAttribute("id",id); tablesetAttribute("className","TableLine");//设定样式 tablesetAttribute("width",'98%'); tablesetAttribute("cellpadding",'3'); tablesetAttribute("cellspacing",'0'); var row = tableinsertRow(); rowstylesetAttribute("backgroundColor","#e0e0e0"); for (var i = 0; i < arrlength; i++) { var col = rowinsertCell(); if(i==0){ colsetAttribute("width",'3%'); } colsetAttribute("className","border:1px solid #9BC2E0;"); colsetAttribute("align","center"); colstylefontSize="13px"; colstylefontWeight="Bold";; //var style = documentcreateAttribute("styles"); //stylenodeValue = "font-size:large"; //colsetAttributeNode(style); colinnerHTML = arr[i]; } //alert(tableouterHTML); return table; }

/ 向表格插入一行 / function addRow(table,id,arr){ var row = tableinsertRow(); rowsetAttribute("id",id); rowonclick=function (){}; for(var i=0;i<arrlength;i++){ var col = rowinsertCell(); colinnerHTML = arr[i]; //colinnerText = arr[i]; colsetAttribute("title",arr[i]); } }

js可以用td 对应的id获取该对象

例:<td id="td1"></td>

js:var td=documentgetElementById("td1");

可以用该对象赋予该td的style等属性

如果是要获得<td>苹果</td>里的"苹果"的话用下面的方法

我们把该值放到隐藏域里然后从js取得该值

<td>苹果<input type="hidden" name="pm1" id="pm1" value="苹果"></td>

js:var pm=documentgetElementById("pm1")value;

<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 = nodeparentNodeparentNode;

alert(tr1rowIndex);

alert(tr1cells[0]childNodes[0]value); //获取的方法一

alert(tr1cells[0]innerText);

// 通过以下方式找到table对象,在获取tr,td。然后获取td的html内容

var table = documentgetElementById("tb1");//获取第一个表格

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

var text = childfirstChildinnerHTML;

windowalert("表格第" + rowIndex + "的内容为: " + text);

}

</script>

JS获取表格行数和列数

<html>

<head>

<script type="text/javascript">

function show()

{

var tab = documentgetElementById("test") ;

//表格行数

var rows = tabrowslength ;

//表格列数

var cells = tabrowsitem(0)cellslength ;

alert("行数"+rows+"列数"+cells);

}

</script>

</head>

<body>

<table id="test" border="1">

<tr>

<td> </td><td>nbsp;</td>

</tr>

<tr>

<td> </td><td>nbsp;</td>

</tr>

</table>

<input type="button" onclick="show();"/>

</body>

</html>

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

使用实例: oTabletBodies[0] oTabletHead[0] oTabletFoot[0] oTablerows[1] oTablecells[1]

2、遍历

var oTable=documentgetElementById("表格id");

oTabletBodies[0]可以看成是rows和cells组成的二维数组,用两个for循环嵌套遍历一下就可以了

直接在td里面添加click事件click="test(this)",然后就可以比较容易的获取到table各行各列的值

thisvalue就是里面的值,还有thisinnerText,thisHTMl具体用什么,根据情况考虑

你是第二次发这个问题吧。上次那个也回答了啊。

+ tablerows[i]cells[4]innerHTML"," + tablerows[i]cells[5]innerHTML";" ;

alert(stuIdsinnerHTML);

上面字符串连接中少+号。

innerHTML ","这里应该是innerHTML + ","

以上就是关于js怎样获得table样式全部的内容,包括:js怎样获得table样式、js怎么获取table标签下的thead标签下的<td>的值、用js选择器获得table中tr里第二个td等相关内容解答,如果想了解更多相关内容,可以关注我们,你们的支持是我们更新的动力!

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

原文地址: https://outofmemory.cn/web/9597589.html

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

发表评论

登录后才能评论

评论列表(0条)

保存