Javascript-форум (https://javascript.ru/forum/)
-   Javascript под браузер (https://javascript.ru/forum/css-html/)
-   -   скрыть столбец таблицы (https://javascript.ru/forum/css-html/70359-skryt-stolbec-tablicy.html)

atanov 30.08.2017 15:24

скрыть столбец таблицы
 
Доброго времени, форумчане.

Задача скрыть столбец таблицы. Таблица приличная >600 строк, 11 столбцов.
Можно ли реализовать условие скрытия ячейки по её номеру в строке? Например № 11 или № 7.
Другими словами - в строке <tr></tr> есть 11 <td></td>, можно ли скрыть определённую <td></td>, слева № 5?

ksa 30.08.2017 15:26

Цитата:

Сообщение от atanov
скрыть столбец таблицы

Цитата:

Сообщение от atanov
можно ли скрыть определённую <td></td>

Нипанятна... :blink:

atanov 30.08.2017 15:28

Цитата:

Сообщение от ksa
ksa

Перебирать все строки и скрывать ячейку в стоке № 7. Можно по номеру в строке или придётся id или другую метку присваивать?

Nexus 30.08.2017 15:31

atanov,
$('table tr').eq(/*-1 + номер строки*/).find('td').eq(/*-1 + номер столбца*/).hide();

рони 30.08.2017 15:31

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

atanov 30.08.2017 15:32

Цитата:

Сообщение от Nexus
Nexus

Спасибо, вот только хотелось бы на чистом javascript.

ksa 30.08.2017 15:34

Цитата:

Сообщение от 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>

Nexus 30.08.2017 15:35

atanov, вроде так:
document.querySelectorAll('table tr')[/*-1 + номер строки*/].querySelectorAll('td')[/*-1 + номер столбца*/].style.display='none';

рони 30.08.2017 15:36

Цитата:

Сообщение от 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>

ksa 30.08.2017 15:36

Цитата:

Сообщение от atanov
скрыть столбец таблицы

Цитата:

Сообщение от atanov
Перебирать все строки и скрывать ячейку в стоке № 7

Опять нипанятна... :cray:


Часовой пояс GMT +3, время: 01:42.