Как выбрать col id, используя jquery, чтобы скрыть через css
У меня есть таблица (и я не мог использовать, потому что заголовок смещается на 1 при попытке скрыть столбец), где каждый столбец имеет свой собственный col id="". Я хочу использовать jquery в следующем коде, чтобы выбрать столбцы в таблице и включать и выключать их.
Вот таблица:
<article class="technical">
<div id="technical-container">
<h1><span id="technology">Technologies</span> / <span id="compliance">Compliance</span> / <span id="certification">Certification</span></h1>
<table id="tech-table" cellspacing="0">
<colgroup>
<col>
<col id="type" class="type">
<col id="name">
<col id="startdate">
<col id="currentenddate">
<col id="elapsed">
<col id="version">
<col id="rating">
<col id="project">
</colgroup>
<tbody>
<tr>
<td>type</td>
<td>Name</td>
<td>Start Date</td>
<td>Current/End Date</td>
<td>Elapsed</td>
<td>Version(s)</td>
<td>Personal Rating</td>
<td>Project</td>
</tr>
<tr>
<td>technology</td>
<td>J2EE</td>
<td>November, 2011</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>1.5, 1.6, 1.7</td>
<td>2</td>
<td>Contractor Optimization</td>
</tr>
<tr>
<td>technology</td>
<td>JS</td>
<td>April, 2012</td>
<td><span id="current"></span></td>
<td>TODO</td>
<td>?</td>
<td>1</td>
<td>Resume Builder</td>
</tr>
<tr>
<td>compliance</td>
<td>CIP</td>
<td>May, 2008</td>
<td>August, 2011</td>
<td>TODO, 3 years, 4 mos</td>
<td>n/a</td>
<td>2</td>
<td>Protection</td>
</tr>
<tr>
<td>certification</td>
<td>Red Cross</td>
<td>May, 2007</td>
<td>April, 2013</td>
<td>TODO, 6 years</td>
<td>n/a</td>
<td>3</td>
<td>Life Saving</td>
</tr>
</tbody>
</table>
</div>
</article>
вот кнопки, которые нажимают, чтобы скрыть:
<article>
<header>
<h1>What</h1>
<div class="mydiv">
<p1>this sections involves what I work with</p1>
</div>
</header>
<section>
<div class="mydiv">
<span id="what1"><button type="button" class="button" id="clickTech">Technologies</button></span> <span id="what2"><button type="button" class="button" id="clickComp">Compliance</button></span> <span id="what3"><button type="button" class="button" id="clickCert">Certifications</button></span>
<!-- <input type="button" class="btn" value="Technologies" id="clickTech" / -->
</div>
</section>
<section>
<h3><span id="whatsel2"><button type="button" class="button-vert" id="clickStart">Start Date</button></span></h3>
<h3><span id="whatsel3"><button type="button" class="button-vert" id="clickEnd">Current/End Date</button></span></h3>
<h3><span id="whatsel4"><button type="button" class="button-vert" id="clickElapsed">Elapsed Time</button></span></h3>
<h3><span id="whatsel5"><button type="button" class="button-vert" id="clickVersion">Version(s)</button></span></h3>
<h3><span id="whatsel6"><button type="button" class="button-vert" id="clickRating">Personal Rating</button></span></h3>
<h3><span id="whatsel7"><button type="button" class="button-vert" id="clickProject">Project</button></span></h3>
</section>
<!-- <footer>
<h2>footer</h2>
<p>footer</p>
</footer> -->
</article>
Вот рабочий селектор для сокрытия строк:
var rowSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table tr").each(function(){
if ($($(this).children()[0]).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var hiders = {"#clickTech":"technology", "#clickComp":"compliance", "#clickCert":"certification"};
for (var id in hiders) {
$(id).click({type:hiders[id]}, rowSelector);
}
и это то, что я имею до сих пор с селектором столбцов, но мне нужна помощь со строками 3, 4 и 5:
var colSelector = function (args) {
$("#"+args.data.type).toggle();
$("#tech-table col").each(function(){
if ($($(this)).text()==args.data.type) {
$(this).toggle();
}
});
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in hiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
Я ценю ваше руководство и помощь.
3 ответа
Вот вам ответ на javascript, если вы не хотите использовать css-решение @jatrim
var colSelector = function (args) {
var num = 0;
var i = 0;
$($("#tech-table tr")[0]).find('td').each(function(){
if ($(this).text() == args.data.type)
num=i;
i++;
});
if (num!=0){
$("#tech-table tr").each(function(){
var tds = $(this).find('td');
$(tds[num]).toggle();
});
}
};
// $("#clickTech").click({type:"technology"},generalSelector);
// assoc array is id:type
var colHiders = {"#clickStart":"Start Date", "#clickEnd":"Current/End Date", "#clickElapsed":"Elapsed Time", "#clickVersion":"Version(s)", "#clickRating":"Personal Rating", "#clickProject":"Project"};
for (var id in colHiders) {
$(id).click({type:colHiders[id]}, colSelector);
}
Также скрипка для тестирования находится здесь http://jsfiddle.net/ueKcL/
Я думаю, что вы хотите здесь: показать / скрыть столбцы HTML-таблицы с помощью CSS.
Мне особенно нравится это: $('td:nth-child(2)').hide(); Где 2 - это индекс столбца, который вы хотите скрыть.
Вы, вероятно, можете сделать что-то вроде: добавить заголовок (или другой атрибут к тегу col) к тегу col, и значение title является индексом столбца. Таким образом, col id="name" будет
<col id="name" title="2">
игнорирование первого пустого тега col. тогда вам нужно нацелиться на td, используя:nth-child (атрибут title) и скрыть их все.
Вам не нужно добавлять заголовок и все еще иметь возможность вычислить индекс col, но это упрощает скрипт с использованием атрибута
ИЛИ ЖЕ
Вы можете даже передать индекс столбца одним нажатием кнопки, для этого есть несколько способов. Но в конце концов вам все еще нужно использовать:nth-child, чтобы скрыть