как определить переключатель в JavaScript - PullRequest
Новая
       4

как определить переключатель в JavaScript

4 голосов
/ 16 февраля 2010

Я создаю динамическую таблицу, в которой в каждой строке есть группа переключателей, расположенных в разных столбцах. Я хочу изменить цвет фона ячейки при щелчке переключателя. Я создаю таблицу, используя фрагмент кода ниже. Как определить переключатель в javascript, чтобы я мог установить ячейку с соответствующим цветом фона. 

<table>
    <c:forEach>
        <tr>
            <c:forEach>
                <td><input type="radio" value="" /></td>
            </c:forEach>
        </tr>
    </c:forEach>
</table>

Ответы [ 6 ]

1 голос
/ 16 февраля 2010

Используйте dojo или jQuery, чтобы выбрать узел radioButton, затем используйте выражения фильтра CSS, чтобы установить для тега td (узел parentNode dom) любой желаемый цвет.

Пример использования dojo: 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
            <title>Dojo selectors example</title>
            <script type="text/javascript">
                var djConfig = {
                    parseOnLoad: true,
                    isDebug: true,
                    locale: 'en-us'
                };
            </script>
            <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.4.1/dojo/dojo.xd.js"></script>
        <script type="text/javascript">

            dojo.addOnLoad(function() {
                // Get all the radioButtons that are inside a <td> tag
                dojo.query("td > input").forEach(function(node, index, array){
                    var td = node.parentNode;
                    dojo.addClass(td, "red");
                    dojo.connect(td, "onclick", function(){dojo.toggleClass(td, "white");});
                });
            });


        </script>
        <style type="text/css">
        .red { background-color : red; }
        .white { background-color : white; }
    </style>
    </head>
    <body>
        <form id="form1">
        <table>
            <tr>
                <td><input type="radio" value="" /></td>
            </tr>
            <tr>
                <td><input type="radio" value="" /></td>
            </tr>
            <tr>
                <td><input type="radio" value="" /></td>
            </tr>
        </table>
        </form>
</body>
</html>

Я оставлю это на ваше усмотрение, чтобы исправить поведение радиокнопки ...

0 голосов
/ 17 февраля 2010

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

<td><input type="radio" value="" onclick="colorMyCell(this)" /></td>

и обработчик: 

function colorMyCell(inp) {
    // get reference to the row
    var tr = inp.parentNode.parentNode;
    // put the TD children of the row into an array
    var cells = tr.getElementsByTagName("TD");
    // bgcolor all the other cells in that row white
    for (var i=0; i<cells.length; i++) {
        cells[i].style.backgroundColor = "#ffffff";
    }
    // now bgcolor the selected cell differently
    inp.parentNode.style.backgroundColor = "#ffffcc";
}

Обратите внимание, что это всего лишь быстрый и грязный пример того, как это сделать. Вы бы хотели позаботиться об этом (убедитесь, что inp.parentNode.parentNode действительно TR, если не найдете лучшего способа прохождения вверх по дереву, чтобы найти фактический TR первого предка), а также используйте CSS classNames вместо прямой установки цветов фона и т. д.

0 голосов
/ 16 февраля 2010

Это просто с jQuery . Вот SSCCE , скопируйте и вставьте его. 

<!doctype html>
<html lang="en">
    <head>
        <title>Test</title>
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script>
            $(document).ready(function() {
                $('#tableId input[name=row]').click(function() {
                    $('#tableId tr').removeClass('selected'); // Reset.
                    $(this).parents('tr').addClass('selected');
                });
            });
        </script>
        <style>
            tr.selected {
                background: #ffc;
            }            
        </style>
    </head>
    <body>
        <table id="tableId">
            <tr><td><input type="radio" name="row" value="row1">row1</td></tr>
            <tr><td><input type="radio" name="row" value="row2">row2</td></tr>
            <tr><td><input type="radio" name="row" value="row3">row3</td></tr>
        </table>
    </body>
</html>

Просто переведите таблицу обратно в динамический вкус, который вы имели с JSP / JSTL.

0 голосов
/ 16 февраля 2010 
var myform = document.forms['myform'];

for ( var i=0; i < myform.elements; i++ )
    if ( myform.elements[i].type == 'radio' ) ...do your stuff

Надеюсь, это поможет.

0 голосов
/ 16 февраля 2010

Вам нужно установить идентификатор или использовать поддельное имя класса.

Позже я должен использовать jquery для доступа к ним и их изменения. http://www.google.es/search?rlz=1C1GGLS_esES361ES361&sourceid=chrome&ie=UTF-8&q=radio+button+jquery

0 голосов
/ 16 февраля 2010

вы должны попытаться установить уникальный идентификатор для поля ввода при его создании (например, id = "theradiobutton")

Тогда вы можете легко ссылаться на него, используя методы DOM!

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

Нет похожих вопросов

...