|
30.08.2017, 15:24
|
Профессор
|
|
Регистрация: 27.06.2016
Сообщений: 180
|
|
скрыть столбец таблицы
Доброго времени, форумчане.
Задача скрыть столбец таблицы. Таблица приличная >600 строк, 11 столбцов.
Можно ли реализовать условие скрытия ячейки по её номеру в строке? Например № 11 или № 7.
Другими словами - в строке <tr></tr> есть 11 <td></td>, можно ли скрыть определённую <td></td>, слева № 5?
|
|
30.08.2017, 15:26
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Сообщение от atanov
|
скрыть столбец таблицы
|
Сообщение от atanov
|
можно ли скрыть определённую <td></td>
|
Нипанятна...
|
|
30.08.2017, 15:28
|
Профессор
|
|
Регистрация: 27.06.2016
Сообщений: 180
|
|
Перебирать все строки и скрывать ячейку в стоке № 7. Можно по номеру в строке или придётся id или другую метку присваивать?
|
|
30.08.2017, 15:31
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
atanov,
$('table tr').eq(/*-1 + номер строки*/).find('td').eq(/*-1 + номер столбца*/).hide();
|
|
30.08.2017, 15:31
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
<meta charset="utf-8">
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
<input type="text" id="input" value="5"/>
<script>
$(function(){
$('#input').on('input change blur click',function(){
$('td:nth-child('+this.value+')').toggle() //.hide()
});
});
</script>
|
|
30.08.2017, 15:32
|
Профессор
|
|
Регистрация: 27.06.2016
Сообщений: 180
|
|
Спасибо, вот только хотелось бы на чистом javascript.
|
|
30.08.2017, 15:34
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Сообщение от atanov
|
на чистом javascript
|
Дык!
<table border='1'>
<tr>
<td>0 0</td><td>0 1</td><td>0 2</td>
</tr>
<tr>
<td>1 0</td><td>1 1</td><td>1 2</td>
</tr>
<tr>
<td>2 0</td><td>2 1</td><td>2 2</td>
</tr>
</table>
<script type='text/javascript'>
var col=1;
var o=document.querySelector('table');
for (var i=0; i<o.rows.length; i++) {
o.rows[i].cells[col].style.display='none';
};
</script>
|
|
30.08.2017, 15:35
|
Профессор
|
|
Регистрация: 04.12.2012
Сообщений: 3,795
|
|
atanov, вроде так:
document.querySelectorAll('table tr')[/*-1 + номер строки*/].querySelectorAll('td')[/*-1 + номер столбца*/].style.display='none';
Последний раз редактировалось Nexus, 30.08.2017 в 15:48.
|
|
30.08.2017, 15:36
|
|
Профессор
|
|
Регистрация: 27.05.2010
Сообщений: 33,126
|
|
Сообщение от atanov
|
на чистом javascript.
|
<meta charset="utf-8">
<style type="text/css">
.hide{
display: none;
}
</style>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>6</td>
<td>7</td>
<td>8</td>
<td>9</td>
<td>10</td>
<td>11</td>
</tr>
</table>
<script>
[].forEach.call( document.querySelectorAll('td:nth-child(5)'), function(el) {
el.classList.add('hide');
});
</script>
|
|
30.08.2017, 15:36
|
|
CacheVar
|
|
Регистрация: 19.08.2010
Сообщений: 14,228
|
|
Сообщение от atanov
|
скрыть столбец таблицы
|
Сообщение от atanov
|
Перебирать все строки и скрывать ячейку в стоке № 7
|
Опять нипанятна...
|
|
|
|