Форум SAPE.RU - Выделение фоном строк всех списков с галочкой

Форум SAPE.RU (http://forum.sape.ru/index.php)

- Пожелания пользователей системы (http://forum.sape.ru/forumdisplay.php?f=15)

Выделение фоном строк всех списков с галочкой

Сделайте страницу со списком заявок и ссылок (для тех у кого работает автомат) с подсветкой фона строки при установки галочки.
И ещё было бы не плохо, чтобы не надо было щёлкать на галочку, а достаточно было просто кликнуть по этой строке.

Чтобы понять на "пальцах" - сделать так же как в phpmyadmin сделано при правке содержимого таблицы.

А то сколько раз уже было, - прочёл текст ссылки, - кликнул, - смотришь, - промахнулся. А так, при выделении фоном, - сразу становится всё понятно.

Поддерживаю, было бы значительно удобнее!

Всё правильно.

Как говориться, сам не разберёшься - никто не сделает.
И так, пожалейте мои глаза, - я подготовил нужный код. Прошу его рассмотреть (всё взял из phpMyAdmin - но рыться там... - много времени тратить).

Нужно добавить в js файл код (например в sorttable.js)

PHP код:


		
			
/**

 * This array is used to remember mark status of rows in browse mode

 */

var marked_row = new Array;



/**

 * enables highlight and marking of rows in data tables

 *

 */

function PMA_markRowsInit() {

    // for every table row ...

    var rows = document.getElementsByTagName('tr');

    for ( var i = 0; i < rows.length; i++ ) {

        // ... with the class 'odd' or 'even' ...

        if ( 'odd' != rows[i].className.substr(0,3) && 'even' != rows[i].className.substr(0,4) ) {

            continue;

        }

        // ... add event listeners ...

        // ... to highlight the row on mouseover ...

        if ( navigator.appName == 'Microsoft Internet Explorer' ) {

            // but only for IE, other browsers are handled by :hover in css

            rows[i].onmouseover = function() {

                this.className += ' hover';

            }

            rows[i].onmouseout = function() {

                this.className = this.className.replace( ' hover', '' );

            }

        }

        // Do not set click events if not wanted

        if (rows[i].className.search(/noclick/) != -1) {

            continue;

        }

        // ... and to mark the row on click ...

        rows[i].onmousedown = function() {

            var unique_id;

            var checkbox;



            checkbox = this.getElementsByTagName( 'input' )[0];

            if ( checkbox && checkbox.type == 'checkbox' ) {

                unique_id = checkbox.name + checkbox.value;

            } else if ( this.id.length > 0 ) {

                unique_id = this.id;

            } else {

                return;

            }



            if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {

                marked_row[unique_id] = true;

            } else {

                marked_row[unique_id] = false;

            }



            if ( marked_row[unique_id] ) {

                this.className += ' marked';

            } else {

                this.className = this.className.replace(' marked', '');

            }



            if ( checkbox && checkbox.disabled == false ) {

                checkbox.checked = marked_row[unique_id];

            }

        }



        // ... and disable label ...

        var labeltag = rows[i].getElementsByTagName('label')[0];

        if ( labeltag ) {

            labeltag.onclick = function() {

                return false;

            }

        }

        // .. and checkbox clicks

        var checkbox = rows[i].getElementsByTagName('input')[0];

        if ( checkbox ) {

            checkbox.onclick = function() {

                // opera does not recognize return false;

                this.checked = ! this.checked;

            }

        }

    }

}



window.onload=PMA_markRowsInit;

Добавить в .css файл (например в styles.css)

Цитата:

/* marked table rows */
table tr.marked th,
table tr.marked {
background: #E5E5E5;
color: #000000;
}

Затем в коде вывода таблицы с ссылками добавить стиль (например для site_links.php) в том месте где идут строки с "галочкой".

Цитата:

<tr class="odd">...

Пожалуйста - поставьте этот код, - или какой-то другой, - главное чтобы цель была достигнута.
ПОЖАЛЕЙТЕ НАШИ ГЛАЗКИ! С подсветкой строки и выбором строки по щелчку - КПД вырастет процентов на 30!

Всё попробовал на http://proxomitron.ru.
Всё что нужно, - делается. Ставить галки - одно удовольствие и фон подсвечивается и с установкой галочки - нет проблем - можно прям по тексту ссылки нажимать - галка ставится сама!

Единственный баг нашёл - это когда щёлкаешь по ссылке, которая открывается в новом окне - JS ставил галку. Не нашёл как это побороть. Спецы в JS помогите разобраться. Конфиг проксимотрона привожу. И саповцов прошу обратить внимание, - а то скриптец доделаем, - а ставить его не захотят... Так и останется один вариант с проксомитроном.

Всех кто много ссылок просматривает/принимает/отклоняет - прошу попробовать, думаю, "фича" вам точно понравится.

PHP код:


		
			
Name = "sape2"

Active = TRUE

Multi = TRUE

URL = "sape.ru/site_links.php"

Limit = 256

Match = "<tr>"

Replace = "<tr class="odd">"



Name = "sape1"

Active = TRUE

URL = "sape.ru/site_links.php"

Limit = 256

Match = "</body></html>"

Replace = "\n"

          "<style>\n"

          "table tr.marked th,\n"

          "table tr.marked {\n"

          "background: #E5E5E5;\n"

          "color: #000000;\n"

          "}\n"

          "</style>\n"

          "\n"

          "<script language="JavaScript">\n"

          "/**\n"

          " * This array is used to remember mark status of rows in browse mode\n"

          " */\n"

          "var marked_row = new Array;\n"

          "\n"

          "/**\n"

          " * enables highlight and marking of rows in data tables\n"

          " *\n"

          " */\n"

          "function PMA_markRowsInit() {\n"

          "    // for every table row ...\n"

          "    var rows = document.getElementsByTagName('tr');\n"

          "    for ( var i = 0; i < rows.length; i++ ) {\n"

          "        // ... with the class 'odd' or 'even' ...\n"

          "        if ( 'odd' != rows[i].className.substr(0,3) && 'even' != rows[i].className.substr(0,4) ) {\n"

          "            continue;\n"

          "        }\n"

          "        // ... add event listeners ...\n"

          "        // ... to highlight the row on mouseover ...\n"

          "        if ( navigator.appName == 'Microsoft Internet Explorer' ) {\n"

          "            // but only for IE, other browsers are handled by :hover in css\n"

          "            rows[i].onmouseover = function() {\n"

          "                this.className += ' hover';\n"

          "            }\n"

          "            rows[i].onmouseout = function() {\n"

          "                this.className = this.className.replace( ' hover', '' );\n"

          "            }\n"

          "        }\n"

          "        // Do not set click events if not wanted\n"

          "        if (rows[i].className.search(/noclick/) != -1) {\n"

          "            continue;\n"

          "        }\n"

          "        // ... and to mark the row on click ...\n"

          "        rows[i].onmousedown = function() {\n"

          "            var unique_id;\n"

          "            var checkbox;\n"

          "\n"

          "            checkbox = this.getElementsByTagName( 'input' )[0];\n"

          "            if ( checkbox && checkbox.type == 'checkbox' ) {\n"

          "                unique_id = checkbox.name + checkbox.value;\n"

          "            } else if ( this.id.length > 0 ) {\n"

          "                unique_id = this.id;\n"

          "            } else {\n"

          "                return;\n"

          "            }\n"

          "\n"

          "            if ( typeof(marked_row[unique_id]) == 'undefined' || !marked_row[unique_id] ) {\n"

          "                marked_row[unique_id] = true;\n"

          "            } else {\n"

          "                marked_row[unique_id] = false;\n"

          "            }\n"

          "\n"

          "            if ( marked_row[unique_id] ) {\n"

          "                this.className += ' marked';\n"

          "            } else {\n"

          "                this.className = this.className.replace(' marked', '');\n"

          "            }\n"

          "\n"

          "            if ( checkbox && checkbox.disabled == false ) {\n"

          "                checkbox.checked = marked_row[unique_id];\n"

          "            }\n"

          "        }\n"

          "\n"

          "        // ... and disable label ...\n"

          "        var labeltag = rows[i].getElementsByTagName('label')[0];\n"

          "        if ( labeltag ) {\n"

          "            labeltag.onclick = function() {\n"

          "                return false;\n"

          "            }\n"

          "        }\n"

          "        // .. and checkbox clicks\n"

          "        var checkbox = rows[i].getElementsByTagName('input')[0];\n"

          "        if ( checkbox ) {\n"

          "            checkbox.onclick = function() {\n"

          "                // opera does not recognize return false;\n"

          "                this.checked = ! this.checked;\n"

          "            }\n"

          "        }\n"

          "    }\n"

          "}\n"

          "\n"

          "window.onload=PMA_markRowsInit;\n"

          "</script>\n"

          "\n"

          "</body>\n"

          "</html>\n"

          "\n"