Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: Обращение к полям таблицы

Добрый день. Подскажите пожалуйста правильно ли я обращаюсь к полям таблицы? Для этого немного поясню суть проблемы: есть таблицы, у которой к каждой записи прикреплён checkbox. Если checkbox в состояние checked то из данной записи надо выбрать значение поля, а саму запись удалить.

Код цикла в котором выбираются нужные значения:
Javascript
1
2
3
4
5
6
7
var mass = new Array();
 $("#dataTable").find("tr").each(function(){
 if(this.td.eq(7).input.is(':checked')){
 mass.push($(this).td.eq(0));
 this.remove();
 }
 });
таблица:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<table id="dataTable" class="table table-striped">
                    <thead>
                    <tr>
                        <th>Nickname</th>
                        <th>First name</th>
                        <th>Last name</th>
                        <th>mobile number</th>
                        <th>email</th>
                        <th>city</th>
                        <th>role</th>
                        <th></th>
                    </tr>
                    </thead>
                    <tbody>
                    </tbody>
                </table>
Код заполнения таблицы:
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
function doAjaxPost() {
 
                                    $.ajax({
                                        type: "GET",
                                        url: "/admin/getlAllUsers",
                                        datatype: "json",
                                        success: function (response) {
 
 
                                            var trHTML = '';
                                            $.each(response, function (i, item) {
                                                trHTML += '<tr><td>' +
                                                    item.nickname + '</td><td>' +
                                                    item.firstName + '</td><td>' +
                                                    item.lastName + '</td><td>' +
                                                    item.mobileNumber + '</td><td>' +
                                                    item.email + '</td><td>' +
                                                    item.city.cityName + '</td><td>' +
                                                    item.role.roleType + '</td><td>' +
                                                    '<input type="checkbox" value=""/>'+
                                                '</td></tr>';
                                            });
                                            $("#dataTable").append(trHTML);
                                        },
                                        error: function () {
                                            alert("error")
                                        }
                                    });
                                }
Ответ: person2713, Ну вы тут по намешали. js и jQuery. Вы должны понимать разницу между DOM объектом и объектом jQuery. Это разные объекты, у каждого свои наборы методов.

Проще было бы добавлять инпуту какой-нибудь специальный класс.
Javascript
1
2
3
4
5
6
$.each(response, function(i, item) {
  trHTML += '<tr><td>' +
    item.nickname + '</td><td>' +
    '<input type="checkbox" class="js-checkbox-role" value=""/>' +
    '</td></tr>';
});
Javascript
1
2
3
4
5
6
var mass = [];
var $tr = $("#dataTable").find(".js-checkbox-role:checked").closest('tr');
$tr.find('td:first-child').text(function(i,text){
  mass.push(text);
});
$tr.remove();
Я бы и всем ячейкам добавил бы свои классы, чтоб было проще к ним обращаться. И в случае, если нужно было бы поменять структуру таблицы, не приходилось править js в 10 местах.

Добавлено через 2 минуты


Добавлено через 16 минут
Да и добавление классов повышают читабельность кода. Это тоже важно. Представьте будет делать правки другой программист, обращение по классам будет более понятно, ежели вы нагородите везде .eq().
Вопрос: Скрыть (показать) ячейку таблицы

Здравствуйте!
Уже второй вечер не могу решить простую задачу:
Нужно при определенном условии сделать ячейку таблицы (id=label) с размещенным в ней объектом (button) невидимой.
Пытаюсь сделать следующим образом:
Javascript
1
2
3
4
function hide()
        {
        document.getElementById('label').style.display ='none';
        }
HTML5
1
2
3
<td id=label>
<div id="button"</div>
</td>
Почему-то такая конструкция отказывается работать. Что не так?
Ответ: Foxconn, все можно, но не нужно. Вы можете назначить display:none ячейке таблицы.
Но назначив этот стиль ячейке, вы поломаете таблицу. Чтобы сохранить структуру таблицы и скрыть ячейку, воспользуйтесь стилем visibility: hidden.

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

PHPHTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!DOCTYPE html>
<html lang="en">
 
<head>
  <meta charset="UTF-8" />
  <title>Document</title>
  <style>
    td{
      border:1px solid black;
      padding:10px;
  }
  </style>
</head>
 
<body>
  <table>
    <tr>
      <td id="label">1</td>
      <td>2</td>
    </tr>
    <tr>
      <td>3</td>
      <td>4</td>
    </tr>
  </table>
  <script>
    function hide(){
    document.getElementById('label').style.visibility = 'hidden';
  }
  hide();
  </script>
</body>
 
</html>
Вопрос: Динамическая таблица данных

Доброго времени суток!

Есть таблица создаваемая на js -

var t = document.createElement('table');
var tbody = document.createElement('tbody');
for(var i = 0;i<6;i++) {

    var tr = document.createElement('tr');
	for (var j = 0;j<16;j++){
    var td = document.createElement('td');
    tr.appendChild(td);
	td.id="td";
	td.onclick = function(){$('#exampleModal').arcticmodal(); };

}
   tbody.appendChild(tr);
}
t.appendChild(tbody);

document.getElementById('table').appendChild(t);


t.rows[0].cells[0].innerHTML="Ц/Ц";
t.rows[1].cells[0].innerHTML="1 год";
t.rows[2].cells[0].innerHTML="I квартал";
t.rows[3].cells[0].innerHTML="II квартал";
t.rows[4].cells[0].innerHTML="III квартал";
t.rows[5].cells[0].innerHTML="IV квартал";

var arr = [{year_line}];
for (var i = 0; i < arr.length; i++) {
  t.rows[0].cells[i+1].innerHTML=arr[i];
}


При наведении на ячейку она выделяется
По клику на нее всплывает модальное окно

Смысл в том, чтобы по клику на ячейку в модальном окне редактировать её значение а потом посредством ajax пересылать информацию в бд. Подскажите как связать каждую ячейку с базой данных...как передать эти данные.
Ответ:
Сообщение от MouseOver
Смысл в том, чтобы по клику на ячейку в модальном окне редактировать её значение а потом посредством ajax пересылать информацию в бд.
По одному значению слать запрос в базу? А может быть лучше изменить все и отправить массив изменений один раз?

Таблица в базе и ее структура должны быть уже определены, не может js породить какую-то произвольную таблицу, а база догадаться что теперь с ее данными делать. Другими словами вы загодя уже знаете, что столбец Ц/Ц описывает в таблице mytable поле name, а столбец 4 поле field4 и т.д. И именно по этим данным и их структуре js должен готовить таблицу на клиенте.

Отредактировали на клиенте данные, нажали кнопку Обновить, при этом собрали все данные из таблицы как массив, ключи которого будут name, field4 и т.д. с массивами значений, в которых индекс равен индексу строки таблицы. Но если речь идет об обновлении уже существующих данных, то такой вложенный индексный массив не годится, должен быть некий уникальный идентификатор, который будет определять строку в таблице базы, которому значения из таблицы на клиенте принадлежат. Даже отправляя запрос на сервер по каждому изменению, а не все сразу, нужно сообщать серверу какой строке таблицы в базе принадлежит значение.

Поэтому скорее от вас требуется пояснение - структура вашей sql-таблицы, которую нужно связать с html-таблицей? Можно заменить, что не обязательно светить именами полей sql-таблицы на клиенте, имена полей sql-таблицы можно связать по их индексам с индексами колонок html-таблицы. Но строки таблицы только с уникальными идентификаторами записей sql-таблицы.
Вопрос: Ивенты в динамической структуре

Здравствуйте! Попробую описать проблему. У меня есть таблица и кнопка "Добавить строку", которая добавляет новую строку в таблицу. Вот код:
var _htmlP = "<tr style='text-align:center' name='z_prodStr#" + j.toString() + "'>" + 
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td class='z-cell'></td>" +
					"<td>" + 
						"<table style='border-collapse:separate;'>" +
							"<tr>" +
								"<td class='z-button-cell'>" +
									"<span name='z_saveProd#" + j.toString() + "' class='z-hm-button'>" +
										"<img alt src='/_layouts/15/1049/images/formatmap16x16.png?rev=23' style='position:absolute; top: -199px; left: -289px'>" +
									"</span>" +
								"</td>" +
								"<td class='z-button-cell'>" +
									"<span name='z_delProd#" + j.toString() + "' class='z-hm-button'>" +
										"<img alt src='/_layouts/15/1049/images/formatmap16x16.png?rev=23' style='position:absolute; top: -182px; left: -289px'>" +
									"</span>" +
								"</td>" +
							"<tr>" +
						"</table>" +
				"</tr>";

$("#z_prodTable").append(_htmlP);


Последняя ячейка в строке содержит табличку с двумя ячейками, которые выполняют функции кнопок.

На них висит следующий ивент:

$("#z_prodTable").on("click", 'span', function() {
	if (~$(this).attr("name").toString().indexOf("z_saveProd#")) {
		alert("Редактирование");	
	} else {
		alert("Удаление");
	}

});


Проблема в том, что если мы добавляем например три строки, и потом нажмем на любую из "кнопок", то ивент сработает три раза.

Почему это происходит мне вроде бы понятно, непонятно как от этого избавиться. Прошу помощи.
Ответ: $("#z_prodTable") - я так понимаю, что это таблица в которую добавляются строки, так? Значит надо при добавлении:

$(_htmlP).appendTo("#z_prodTable").find('span').click(....)


Или же лучше, родительской таблице в которую вставляются эти строки вместе с вложенной таблицей, в которой и есть этот span делегировать единожды обработку щелчка по ним.
Вопрос: большая таблица шире окна

Добрый день.
Есть таблица на 20-30 колонок. Растянулась, не влезает в окно браузера.
Помогите, пожалуйста, сделать ее ширину 90% от родительского div
Структура такая
Код CSS
1
2
3
.display-file {
    width: 90% !important;
}
Код HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<div>
    <table class="display-file">
        <tbody>
            <tr>
                <td>iii</td>
                <td>iii</td>
                <td>iii</td>
            </tr>
            <tr>
                ...
            </tr>   
                        ...
        </tbody>    
    </table>    
</div>  
Ответ: Огромное спасибо! Добавлю для тех, у кого впредь возникнет такая проблема:
"Для корректной работы table-layout:fixed обязательно должна быть задана ширина таблицы."
Вопрос: Структура сайта с многоязыковой поддержкой

Всем здравствуйте!

Как лучше организовать сайт, в котором есть переключение между языками?
Может сделать разные варианты шаблонов (по одному на каждый язык), и сделать в таблицах БД с текстом по столбцу на каждый язык?

Как обычно такая задача решается?
Ответ: В базе создать таблицу языков. Каждое русское слово написать в новой строке. По столбцам давать значение других языков
Вопрос: КАРТА САЙТА в виде структуры

Добрый день, уважаемые, передо мной стоит задача создать карту сайта в виде структуры, чтобы она автоматический строилась, могли бы вы мне подсказать с чего начать, или имеются какие-нибудь прототипы... Заранее спасибо ! Пример прикрепил, что-нибудь такое в итоге нужно получить.
Ответ: насчёт схемы, предлагаю использовать svg - красивее будет
а вот насчёт создания структуры, тут посложнее
можно сделать парсер, который будет чекать ссылки типа <a href="http://www.cyberforum.ru/aaa.html"></a>, и по ним переходить, а заголовок страницы использовать как название части структуры

Добавлено через 2 минуты
а вообще я видел "генератор sitemap"
Вопрос: Обнуляется указанная структура пользователю

Добрый день.
В настройках пользователя есть пункт где его можно добавить в группу (структура организации) я добавлю, на завтрашний день он удаляется. Не могу понять в чем проблема и куда смотреть.

Bitrix24
Ответ:
Сообщение от insideone
если это сбивает подразделение, значит дело точно в AD.
Огромное спасибо. Всё из за импотра структуры ад в битрикс было. Он оказывается если не находил структуру в ад брал и всех в одну группу раскидывал.
Вопрос: Правельная html структура

function renderWorked(itemsi) {
        
  $('#cases').append('<div class="works block" >   </div>'); // создаём див в который будет добавляться информация с джсон
  
  var containered = $('.block'), html = [], i, item;  // сюда должно добавлять 
    for (i = 0; i < itemsi.length; i ++) {
            item = itemsi[i];
         
        
        
        if($("div")){ если етод код убрать то все загребет под одну категорию
        
        //-----собирает html добавляя данные с json  
        
        html.push('<div  class="works' + item['Category']  + '"' + 'style="float: left"'+ 'hide">'); -  вставляет div с нужной категорией
        html.push('<div class="work-wrapper closed w' + item['Wraper']+'">');
        html.push('<img data-video="' + item['data-video'] + '" src="/Kvinto/img/works/preview/' + item['image-data']  +   'data-alt-src="' + item['data-alt-src'] + '.jpg title="" alt=""   >');
        html.push('<h3>'+ item['title'] + '</h3>');
        html.push('</div>');
    }
             

    html.push('</div>');
    containered.html(html.join(''));
    // html.push('<div class="clearfix"></div>');
        }

}


var workItemsed = [  //json файл

// kategori_1
{'Wraper': '1','Category': 'Digital','data-video': '5n_aW-dPRIQ0', 'data-alt-src':'5n_aW-dPRIQ0', 'image-data': '5n_aW-PdRIQ0.jpg"', 'title': 'Digital <br>  (пример1)' },

// kategori_2
{'Wraper': '2','Category': 'iron75','data-video': 'r3-K4vdvRe6E', 'data-alt-src':'r3-K4dvvRe6E', 'image-data': 'r3-K4vvdRe6E.jpg"', 'title': 'Digital <br> rill)' },

// Kategori_3
{'Wraper': '1','Category': 'tod123','data-video': 'np_IEdf2dz0I', 'data-alt-src':'np_IEddf2z0I', 'image-data': 'np_IEdfd2z0I.jpg"', 'title': 'Digital <br> Screen ' },

// Kategori_4
{'Wraper': '2','Category': 'CinemaSity','data-video': 'IEv-n8d1jXj4', 'data-alt-src':'IEv-n8d1jXj4', 'image-data': 'IEv-n81djXj4.jpg"', 'title': 'Digital <br> s23' },

// Kategori_5
{'Wraper': '2','Category': 'GEt1323','data-video': 'qMyvvsdI-Ct8', 'data-alt-src':'qMyvvsI-Cdt8', 'image-data': 'qMyvdvsI-Ct8.jpg"', 'title': 'Digital <br> ' },

// kategori_6
{'Wraper': '2','Category': 'Center','data-video': 'wSszoG2dJMTM', 'data-alt-src':'wSszoG2dJMTM', 'image-data': 'wSszoG2JMdTM.jpg"', 'title': 'Digital <br> Digital' },

 
renderWorked(workItemsed);




Получаеться такая разметка :
<div class="Digital" style="float: left" hide"="">  </div>
<div class="Digital" style="float: left" hide"="">  </div>
<div class="Digital" style="float: left" hide"=""> </div>
<div class="Digital" style="float: left" hide"=""> </div>

А нужно, чтоб получилось: 

один <div class="Digital" style="float: left" hide"=""> <div class="work-wrapper">  <img>    </div>  </div> - тоесть див категория , и в ету категорию все согласно json структуре .

Ответ:
Тут есть кнопка "код". Нужно оформить куски кода правильным образом. 

Еще есть , там можно слепить готовый пример, сразу и попробовать. Легче будет получить ответ.

И что не правильно?

Структура получается такая 
Код

<div id="cases">
<div class="works block">
   <div class="worksDigital" style="float: left" hide"=""><div class="work-wrapper closed w1">
      <img data-video="5n_aW-dPRIQ0" src="/Kvinto/img/works/preview/5n_aW-PdRIQ0.jpg" 
               data-alt-src="5n_aW-dPRIQ0.jpg title=" "="" alt="">
      <h3>Digital <br>  (пример1)</h3>
   </div></div>
...

</div></div>

Это не правильно? А как тогда должно быть?

Это сообщение отредактировал(а) ksnk - 23.6.2015, 00:23
Вопрос: Какие теги HTML5 и как правильно нужно их использовать, чтобы сделать оздать нужную структуру сайта

Я читал про новые теги HTML5, но до конца так и не смог разобраться. На разных сайтах по-разному пишут.
1) Нужно ли создавать слой который будет содержать весь сайт? И если да, то как он будет называться section или article или еще как-то?
2) Меню сайта nav должно быть внутри шапки сайта header или отдельным слоем?
3) Для меню сайта лучше использовать тег nav или menu?
4) Если рассмотреть на примере сайта. Сайт имеет фиксированную ширину.
а) вверху идет блок шапки и он будет сделан тегом header.
б) далее, блок главного и единственного меню на сайте, только будет это отдельный блок или в тег header его нужно вставить?
в) на главной странице далее идет блок с меняющимися картинками (баннер) во всю ширину страницы. Какой у него будет тег — section и, в каком теге он должен находится — header или отдельным блоком?
г) следующим блоком идет полоска с вопросом и кнопкой. Какой нужен для нее тег и будет ли она находится в отдельном блоке или внутри другого?
д) после идет описание страницы main. В нем будет, только заголовок, текст абзацами и ссылки. Нужно ли создавать внутренний тег section, в котором все это будет находится? Где-то в интернете я такое видел.
е) после идет подвал страницы footer.
ж) могут ли в HTML 5 использоваться теги div? Бывает, что сайт сложен и подключаются какие-то скрипты вроде jquery и у них бывает большая слоевая структура, например внешний div, внутренний div, другой div во внешнем div’е. Что с ними делать? Так и оставлять или нужно заменять на section, article, aside или еще какие?
Ответ: Новые теги, такие как header, nav или article нужны для семантики - улучшения структуры страницы.