Настройка динамического индекса в JavaScript - PullRequest
Новая
       20

Настройка динамического индекса в JavaScript

2 голосов
/ 27 июля 2011

У меня есть таблица, к которой мне нужно динамически добавлять строки одним нажатием кнопки. Каждая строка имеет 3 текстовых поля и кнопку очистки. При щелчке очистки необходимо очистить данные в текстовых полях, т. Е. При нажатии кнопки я отправляю индекс строки методу, который удаляет содержимое текстовых полей этого индекса.

Проблема - Как указать индексный номер в свойстве onClick кнопки строки при добавлении новой строки?

Ответы [ 2 ]

1 голос
/ 27 июля 2011

Как указать индексный номер в свойстве onClick кнопки строки при добавлении новой строки?

Нет.Вместо этого используйте тот факт, что текстовые поля и кнопка находятся в одной строке.Я, вероятно, вообще не использовал бы onclick на кнопке;вместо этого я бы обработал один щелчок на table и обработал бы нажатие кнопки там (это называется делегированием события).Примерно так: 

var table = document.getElementById("theTableID");
table.onclick = function(event) {
    var elm, row, boxes, index, box;

    // Handle IE difference
    event = event || window.event;

    // Get the element that was actually clicked (again handling
    // IE difference)
    elm = event.target || event.srcElement;

    // Is it my button?
    if (elm.name === "clear") {
       // Yes, find the row
       while (elm && elm !== table) {
           if (elm.tagName.toUpperCase() === "TR") {
               // Found it
               row = elm;
               break;
           }
           elm = elm.parentNode;
       }
       if (row) {
           // Get all input boxes anywhere in the row
           boxes = row.getElementsByTagName("input");
           for (index = 0; index < boxes.length; ++index) {
               box = boxes[index];
               if (box.name === "whatever") {
                   box.value = "";
                }
           }
       }
    }
};

... но если вы хотите продолжать использовать атрибут onclick на кнопке, вы можете взять середину этого:

Кнопка:

<input type="button" onclick="clearBoxes(this);"  ...>

Функция: 

function clearBoxes(elm) {
   var row, boxes, index, box;

   // Find the row
   while (elm) {
       if (elm.tagName.toUpperCase() === "TR") {
           // Found it
           row = elm;
           break;
       }
       elm = elm.parentNode;
   }
   if (row) {
       // Get all input boxes anywhere in the row
       boxes = row.getElementsByTagName("input");
       for (index = 0; index < boxes.length; ++index) {
           box = boxes[index];
           if (box.name === "whatever") {
               box.value = "";
            }
       }
   }
}

Ссылки:

  • DOM2 Core спецификация - хорошо поддерживается всеми основными браузерами
  • DOM2 HTML спецификация - связи между DOM и HTML
  • DOM3 Core спецификация - некоторые обновления, не все поддерживаются всеми основными браузерами
  • HTML5 спецификация - которая теперь содержит привязки DOM / HTML, например, для HTMLInputElement, так что вы знаете о свойствах value и name.

Не по теме : Как вы можете видеть, мне пришлось обойти некоторые различия в браузере и сделать несколько простых полезных вещей (например, найти ближайший родительский элементэлемент) явно в этом коде.Если вы используете приличную библиотеку JavaScript, такую ​​как jQuery , Прототип , YUI , Closure или любой из нескольких других , они сделают это за вас, что позволит вам сконцентрироваться на вашей реальной проблеме.

Чтобы дать вам идею, вот тот первый пример (обработка клика через делегирование события), написанный с помощью jQuery: 

$("#theTableID").delegate("input:button[name='clear']", "click", function() {
    $(this).closest("tr").find("input:text[name='whatever']").val("");
});

Да, действительно.И другие библиотеки также упростят задачу.

0 голосов
/ 27 июля 2011

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

Делегирование событий с jQuery 

<input class="clear-row-btn" type="button" >Clear Row</input>

.Live событие 

$(".clear-row-btn").live("click", function(){
  var $tr = $(this).closest("tr"); 
  $tr.find("input[type='text']").val(""); 
});

HTML с методом onclick 

<input type="button" onclick="clearRow(this)" >Clear Row</input>

JQuery 

 function clearRow(btn) {  
  var $tr = $(btn).closest("tr"); 
  $tr.find("input[type='text']").val(""); 
 }

JavaScript 

 function clearRow(element) { 

      while(element.nodeName!='TR'){
       element = element.parentNode;
      }

      //find textboxes inside the element, which is now the parent <tr>      
 }
...