jQuery цикл через таблицу для отображения значений

Question

Я в затруднении здесь. Я создал быстрый скрипт, который добавит новую строку в таблицу, а также сможет удалить строку.

jsFiddle ->http://jsfiddle.net/wLpJr/10/

То, что я хочу, чтобы достичь это: Display каждое значение каждой строки (в DIV с ID = '') thedata

Первоначально я начал с добавления число в конце каждого идентификатора, начиная с «1», и увеличивать каждый раз, когда пользователь добавляет строку.

//This is random code 
var rowcount = parseInt($('#rowcount').val()); 
var newcount = rowcount + (1*1); 
var x = $('#radioinput' + newcount).val('a value'); 
$('#rowcount').val(newcount); 

Проблема заключается в том, что можно сказать, что вы добавляете 5 строк. Теперь удалите строку 3. Когда вы зацикливаете таблицу данных, вы получите сообщение об ошибке, потому что строка «3» не существует. У вас есть строки 1, 2, 4, 5, 6. В частности - вход с id = 'radioinput3' не будет присутствовать.

Затем я решил сделать это:

$('#maintable > tbody > tr').each(function() { 
     radiovalue[i] = $("input[type='hidden']", this).map(function() { 
      var vid = 'radio' + i; 
      var myval = this.value; 
      var radioinput = document.createElement("input"); 
       radioinput.type = "hidden"; 
       radioinput.value = myval; // set the CSS class 
       radioinput.id = vid; 
       $('#maintable').append(radioinput); 
     }).get() 
     text1value[i] = $('td > input', this).map(function() { 
      var vid = 'text1pos' + i; 
      var myval = this.value; 
      var text1input = document.createElement('input'); 
      text1input.type='hidden'; 
      text1input.value = myval; 
      text1input.id = vid; 
      $('#maintable').append(text1input); 
     }).get() 
     text2value[i] = $('td > input', this).map(function() { 
      var vid = 'text2pos' + i; 
      var myval = this.value; 
      var text2input = document.createElement('input'); 
      text2input.type='hidden'; 
      text2input.value = myval; 
      text2input.id = vid; 
      $('#maintable').append(text2input); 
     }).get(); 
    }); 

Проблемы здесь в том, что я получаю «неопределенный» значение.

Answer 1

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

Добавить thead и tbody теги к вашему столу, это сделает вашу жизнь проще.

Я не уверен, почему у вас есть скрытые div для хранения значений input[type=radio], вы не нуждаетесь в них, напрямую обращайтесь к значениям.

$('#showdata').click(function() { 
    $("#maintable tbody tr").each(function(i, v) { 
     var myp = "<p>Radio value is = " + $(this).find('input[type=radio]:checked').val() 
        + "\nText1 value is = " + $(this).find('input[id$=text1]').val() 
        + "\nText2 value is = " + $(this).find('input[id$=text2]').val() + "</p>"; 
     $('#thedata').append(myp); 

    }); 
}); 

jsFiddle Demo

Вы можете добавить класс CSS для ввода текстовых полей, чтобы сделать его легче получить, но я просто использовал селектор jQuery ends with.

Кроме того, вы удаляете селектор, если слишком высоко вверх по дереву DOM на (document), вместо этого ограничите его как можно ближе, в этом случае #maintable.