amarasat Ответов: 3

Ячейка таблицы HTML, вводит и обрабатывает пользовательский атрибут?

Всем Привет,

Сценарий: Если на веб-странице уже есть HTML-таблица, то строки и ячейки в HTML-таблице на странице генерируются из XML-файла. Таким образом, вся таблица создается динамически.

<xsl:for-each select="xxxx">
<td align="center"  önclick="TableClicked(event)">
<span> 10 </span>
</td>
</xsl:for-each>


приводить в исполнение: Я хочу ввести пользовательское свойство или атрибут, известный как "выбор", для каждой отдельной ячейки таблицы.

Шаг 1) В событиях OnClick этих ячеек я хочу переключить это свойство выбора на true и false (в то же время, чтобы изменить цвет фона ячейки, который я знаю, как это сделать), так что со стороны пользователя это будет так же, как он сделал выбор этой ячейки (выбирая и снимая выбор каждый раз, когда он нажимает на нее).

Шаг 2) Любой простой способ захватить все ячейки в таблице, чье свойство selection истинно в одном вызове, вместо того, чтобы проходить через каждую ячейку и видеть, какие из них имеют свойство selection true.

Как бы я этого добился?

3 Ответов

Рейтинг:
21

enhzflep

Ладно, пара моментов, которые приходят на ум.
Во-первых, самый простой способ получить список всех выбранных ячеек-это дифференцировать их по имени класса, а не по пользовательскому атрибуту.

Я бы просто дал ячейкам таблицы класс - скажем, tblNorm, tblSelected.
Затем вы можете использовать document.getElementsByClassName, чтобы получить список любого типа.

Конечно, это не так много строк, чтобы получить все выбранные элементы, если вы используете пользовательский атрибут. В этом случае я полагаю, что просто получу список всех ячеек таблицы, а затем посмотрю, является ли атрибут истинным или ложным.

Что-то вроде этого, возможно:

<!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>

amarasat

энхзфлеп,

Большое спасибо за вашу душевность и время, я смог решить свою проблему, используя атрибут className, который вы описали в своем решении. Таким образом, я смог вытащить все элементы с помощью функции "getElementsByClassName().

Ваше решение решило мою проблему.

Рейтинг:
2

Ashraff Ali Wahab

Для Шага 2:

jQuery selector $('td[Selection|="true"]') выдаст все ячейки со значением Selection как true

amarasat

Большое спасибо за быстрый ответ. Мне очень жаль упоминать, что клиент не хочет, чтобы мы использовали jQuery. У них есть проблемы с безопасностью, поэтому это должно быть не jQuery-решение. Однако мы можем использовать методы реализации DOM.

Рейтинг:
16

Zoltán Zörgő

Вы можете использовать JQuery данные[^] метод добавления и извлечения любого вида данных в/из любого элемента.

Но вместо этого я бы использовал html-класс. Вы можете использовать JQuery добавление[^] и removeClass[^] для этого (или toggleClass[^]). Вам не нужно назначать css этому классу (но вы можете). И вы также можете легко захватить все сразу также с помощью 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() {
   $(this).toggleClass("selected");

   $("#allselected").empty();
   $("TD.selected").each(function(i)
   {
        $("#allselected").append("<span>" + $(this).html() + "</span>")
   }
   );
 });
</script>

</html>
</body>

amarasat

Большое спасибо за быстрый ответ. Мне очень жаль упоминать, что клиент не хочет, чтобы мы использовали jQuery. У них есть проблемы с безопасностью, поэтому это должно быть не jQuery-решение. Однако мы можем использовать методы реализации DOM.

Zoltán Zörgő

Интересно, поскольку jquery может делать столько же, сколько javascript. У него нет проблем с безопасностью, о которых я знаю. Хотя каждый оператор jquery можно заменить простым старым javascript, но он будет только длиннее, не более того.

Arunprasath Natarajan

Хорошо сказано

amarasat

Золтан,

Большое спасибо за вашу помощь и время, я смог решить свою проблему, используя атрибут className тега <td>. Таким образом, я смог вытащить все элементы, используя "getElementsByClassName();