HTML Table Cell，介绍和处理自定义属性？ [英] HTML Table Cell, introduce and handle custom attribute?
本文介绍了HTML Table Cell，介绍和处理自定义属性？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
Hello Everyone，
场景：网页上已有HTML表格，HTML表格中的行和单元格页面是从XML文件生成的。因此整个表格是动态创建的。
< xsl：for-each select = xxxx >
< td 对齐 = center önclick = < span class =code-keyword> TableClicked（event） >
< span > 10 < / span >
< / td >
< / xsl：for-each >
实施：我想为每个人引入一个称为选择的自定义属性或属性表的单个单元格。
步骤1）在这些单元格的OnClick事件中，我想将此选择属性切换为true和false（同时）更改我知道如何操作的单元格的背景颜色，所以从用户方面来看，就像他选择了那个单元格（每次单击它时选择和取消选择）。 />
步骤2）任何简单的方法来获取表中所有选择属性在一次调用中为真的单元格，而不是遍历每个单元格每个单元格并查看哪些单元格的选择属性为真。
我将如何实现这一目标？
解决方案
< blockquote>好的，想到几点。
首先，获取所有选定单元格列表的最简单方法是通过className而不是自定义属性进行区分。
我只是给表格单元格一个类 - 比如tblNorm，tblSelected。
你可以然后你se document.getElementsByClassName获取任一类型的列表。
当然，如果使用自定义属性，获取所有选定项目的行数并不多。在这种情况下，我想我只是得到所有表格单元格的列表，然后查看该属性是真还是假。
这样的事情或许：
< ！DOCTYPE < span class =code-attribute> html >
< html >
< span class =code-keyword>< head >
< script >
function makeTbl（max）
{
var table，tbody，tr， td，x，y，cellIndex;
table = document .createElement（' table ）;
tbody = document .createElement（' tbody ）;
table.appendChild（tbody）;
cellIndex = 0 ;
for （y = 0 ; y< max; y ++）
{
tr = document .createElement（' tr' ）;
for （x = 0 ; x< max; x ++）
{
td = document .createElement（' td' ）;
td.appendChild（ document .createTextNode（ [ + x + ， + y + ]））;
td.setAttribute（' cellIndex'，cellIndex）; // 稍后用于显示功能
tr.appendChild（td）;
cellIndex ++;
}
tbody.appendChild（tr）;
}
return 表;
}
function onCellClickClassChange（）
{
var td = 此;
if （td.className == ' tblSel'）
td.className = ' tblNorm';
else
td.className = ' tblSel';
}
function onCellClickAttribChange（）
{
var td = 此;
var curState = td.getAttribute（' 选择了）;
if （（curState == undefined ）||（curState == ' false'））
curState = true ;
else
curState = false ;
td.setAttribute（' selected'，curState）;
}
function attachHandlerToChildrenByTag（parent，eventType，functionToAttach，tagName）
{
var mArray = parent.getElementsByTagName（tagName）;
var i，len;
len = mArray.length;
for （i = 0 ; i< len; i ++）
{
mArray [i] .addEventListener（eventType，functionToAttach， true ）;
}
}
function ShowSelected1（）
{
var tgt = document .getElementById（' tgtDiv_1' ）;
var selList = tgt.getElementsByClassName（' tblSel'）;
var i，n = selList.length;
var str = ' ';
for （i = 0 ; i< n; i ++）
{
如果（（i + 1）％6 == 0 ）
str + = \ n;
str + = selList [i] .getAttribute（' cellIndex'）;
if （i！=（n-1））
str + = ，;
}
alert（str）;
}
function ShowSelected2（）
{
var tgt = document .getElementById（' tgtDiv_2'）;
var tdList = tgt.getElementsByTagName（' TD'）;
var i，a = 0 ，n = tdList.length;
var str = ' ';
for （i = 0 ; i< n; i ++）
{
if （tdList [i] .getAttribute（' 选择'）== ' true'）
{
if （（a + 1）％6 == 0 ）
str + = < span class =code-string> \ n;
str + = tdList [i] .getAttribute（' cellIndex'） ;
str + = ，;
a ++;
}
}
alert（str）;
}
function myOnInit（）
{
var tgt = document .getElementById（' tgtDiv_1' ）;
var tbl = makeTbl（ 5 ）;
attachHandlerToChildrenByTag（tbl，' click' ，onCellClickClassChange，' td'）;
tgt.appendChild（tbl）;
tgt = document .getElementById（' tgtDiv_2' ）;
tbl = makeTbl（ 5 ）;
attachHandlerToChildrenByTag（tbl，' click' ，onCellClickAttribChange，' td'）;
tgt.appendChild（tbl）;
}
< / 脚本 >
< style >
body
{
cursor ： 默认值;
}
。 tblSel
{
background-color ： #ddd;
}
< / 风格 >
< / head >
< body onload =' myOnInit（）;' >
< div id =' tgtDiv_1' > < / div >
< 按钮 id =' listSelectedBtn1' onclick =' ShowSelected1（）' > 显示选定的单元格索引< / button >
< span class =code-keyword>< div id =' tgtDiv_2' > < / div > ;
< 按钮 id =' listSelectedBtn2' onclick =' ShowSelected2（）' > 显示选定的单元格索引< span class =code-keyword>< / button >
< / body >
< / html >
您可以使用JQuery 数据 [< a href =http://api.jquery.com/data/target =_ blanktitle =新窗口> ^ ]方法，用于向/从任何元素添加和检索任何类型的数据。
但我会改用html类。您可以使用JQuery addClass [ ^ ]和 removeClass [ ^ ]（或 toggleClass [ ^ ]）。你不需要为那个类分配css（但你可以）。而且您也可以使用jQuery轻松获取所有内容。
< html >
< head >
< script src = http://code.jquery.com/jquery-latest.js > < / script >
< style >
TD {宽度：100px; border：1px solid red;}
TD.selected {background：lightgreen;}
SPAN {padding：0 1em;背景：浅绿色;保证金：0 .5em;}
< / style >
< / head >
< body >
< table class = 表格 >
< thead >
< tr >
<th > < / th >
< < span class =code-leadattribute> th > B < / th >
< < span class =code-leadattribute> th > C < / th >
< < span class =code-leadattribute> / tr >
< / thead >
< tbody id = eventsTable >
< tr >
< td > ; 1 < / td >
< td > ; 2 < / td >
< td > 3 < / td >
< / tr >
< tr >
< td > 4 < / td >
< td > 5 < / td >
<td > 6 < / td >
< < span class =code-leadattribute> / tr >
< / tbody >
< / table >
< ; div id < span class =code-keyword> = allselected > < / div >
< script >
（td）。click（function（）{
Hello Everyone,
Scenario: Has a HTML table on a webpage already, the rows and cells in the HTML table on the page are generated from an XML file. So the whole table is created dynamically.
<xsl:for-each select="xxxx">
<td align="center" önclick="TableClicked(event)">
<span> 10 </span>
</td>
</xsl:for-each>
To Implement: I want to introduce a custom property or attribute known as "Selection" to each and every individual cell of the table.
step 1) On the OnClick events of these cells, i want to toggle this selection property to true and false (at the same time to change the background color of the cell which i am aware of how to do), so from the user side, it would be just like he made a selection of that cell (selecting and unselecting each time he clicks on it).
step 2) Any easy way to grab all the cells in the table whose selection property is true in one call, instead of going through each and every cell and seeing which ones are having the selection property true.
How would i achieve this?
解决方案
Okay, a couple of points that come to mind.
First, the easiest way to get a list of all selected cells, is to differentiate by className instead of a custom attribute.
I would simply give the table cells a class - say tblNorm, tblSelected.
You can then use document.getElementsByClassName to get a list of either type.
Of course, it's not that many lines to get all of the selected items if you do use a custom attribute. In that case, I suppose I'd just get a list of all of the table cells, then see if the attribute was true or false.
Something like this perhaps:
<!DOCTYPE html> <html> <head> <script> function makeTbl(max) { var table, tbody, tr, td, x, y, cellIndex; table = document.createElement('table'); tbody = document.createElement('tbody'); table.appendChild(tbody); cellIndex = 0; for (y=0; y<max; y++) { tr = document.createElement('tr'); for (x=0; x<max; x++) { td = document.createElement('td'); td.appendChild( document.createTextNode(" ["+x+","+y+"] ") ); td.setAttribute('cellIndex', cellIndex); // used for the display function later on tr.appendChild(td); cellIndex++; } tbody.appendChild(tr); } return table; } function onCellClickClassChange() { var td = this; if (td.className == 'tblSel') td.className = 'tblNorm'; else td.className = 'tblSel'; } function onCellClickAttribChange() { var td = this; var curState = td.getAttribute('selected'); if ((curState == undefined) || (curState == 'false')) curState = true; else curState = false; td.setAttribute('selected', curState); } function attachHandlerToChildrenByTag(parent, eventType, functionToAttach, tagName) { var mArray = parent.getElementsByTagName(tagName); var i, len; len = mArray.length; for (i=0; i<len; i++) { mArray[i].addEventListener(eventType, functionToAttach, true); } } function ShowSelected1() { var tgt = document.getElementById('tgtDiv_1'); var selList = tgt.getElementsByClassName('tblSel'); var i, n = selList.length; var str = ''; for (i=0; i<n; i++) { if ((i+1)%6 == 0) str += "\n"; str += selList[i].getAttribute('cellIndex'); if (i != (n-1)) str += ", "; } alert(str); } function ShowSelected2() { var tgt = document.getElementById('tgtDiv_2'); var tdList = tgt.getElementsByTagName('td'); var i, a=0, n = tdList.length; var str = ''; for (i=0; i<n; i++) { if (tdList[i].getAttribute('selected') == 'true') { if ((a+1)%6 == 0) str += "\n"; str += tdList[i].getAttribute('cellIndex'); str += ", "; a++; } } alert(str); } function myOnInit() { var tgt = document.getElementById('tgtDiv_1'); var tbl = makeTbl(5); attachHandlerToChildrenByTag(tbl, 'click', onCellClickClassChange, 'td'); tgt.appendChild(tbl); tgt = document.getElementById('tgtDiv_2'); tbl = makeTbl(5); attachHandlerToChildrenByTag(tbl, 'click', onCellClickAttribChange, 'td'); tgt.appendChild(tbl); } </script> <style> body { cursor: default; } .tblSel { background-color: #ddd; } </style> </head> <body onload='myOnInit();'> <div id='tgtDiv_1'></div> <button id='listSelectedBtn1' onclick='ShowSelected1()'>show selected cell indices</button> <div id='tgtDiv_2'></div> <button id='listSelectedBtn2' onclick='ShowSelected2()'>show selected cell indices</button> </body> </html>
You can use the JQuery data[^] method to add and retrieve any kind of data to/from any element.
But I would use a html class instead. You can use JQuery addClass[^] and removeClass[^] for that (or toggleClass[^]). You dont need to assign css to that class (but you can). And You can also grab all at once easily also with jQuery.
<html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <style> TD {width: 100px; border: 1px solid red;} TD.selected {background: lightgreen;} SPAN {padding: 0 1em; background: lightgreen; margin: 0 .5em;} </style> </head> <body> <table class="table"> <thead> <tr> <th>A</th> <th>B</th> <th>C</th> </tr> </thead> <tbody id="eventsTable"> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> <tr> <td>4</td> <td>5</td> <td>6</td> </tr> </tbody> </table> <div id="allselected"></div> <script>
("td").click(function() {
这篇关于HTML Table Cell，介绍和处理自定义属性？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
