2014-04-09 2 views
0

я получил такую ​​функцию:JavaScript/Jquery - Копировать строку таблицы внутри обработчика

function isRowEmpty(){ 
     var emptyRow = true; 
     var tableRow; 
     $('#ProblemsGrid').delegate('td a', 'click', function() { 
      tableRow = $(this).closest ('tr'); 
     }); 

     tableRow.find('textarea').each(function(index, element){ 
       var value = $(element).val(); 
       if(value != "") {emptyRow = false;} 
      }); 
     return emptyRow; 
    } 

То, что я пытаюсь сделать, это получить строку таблицы, которая имеет, что была нажата и проверить из эту строку, чтобы увидеть, если она пуста, а затем верните true/false. Я думаю, что проблема, с которой я столкнулась, имеет какое-то отношение к закрытию javascript. Var tableRow не изменяется во внешней функции. Я пытался разобраться в обходном пути, но не повезло. Я относительно новичок в JavaScript и JQuery.

Обновление: Вот как используется isRowEmpty().

function deleteRow(){ 
     if (isRowEmpty()===true){ 
       $('#ProblemsGrid').delegate('td a', 'click', function() { 
       $(this).closest ('tr').remove(); 
        }); 
     } 
} 

Вот часть моей HTML:

<tr> 
<td><textarea name='text' style='width: 98%; height:40px'>....</textarea></td> 
<td><a href='#anchor' name='DeleteButton' onclick='deleteRow();'> 
<img src='../images/delete.gif'></img> </a> 
</td> 
</tr> 
+1

Можете ли вы показать, как вы используете 'isRowEmpty()'? и ваш HTML – Satpal

+0

Вы заполняете переменные внутри обработчика и обратный вызов, который выполняется асинхронно. Но вы обрабатываете свой 'isRowEmpty', как если бы он выполнялся синхронно. Вам нужно предоставить дополнительную информацию о том, что вы хотели бы сделать. –

+0

Я только что обновил свой вопрос, как используется isRowEmpty и связанный с ним HTML. Благодаря! – manutd500

ответ

0

Вы должны использовать силу JQuery, когда вы используете его. Я попытался упростить код:

$('.deleteRow').on('click', function() { 
    var tr = $(this).closest('tr'); 
    var remove = true; 
    tr.find('textarea').each(function() { 
     if ($(this).val() != '') { 
      remove = false; 
     } 
    }); 
    if (remove) { 
     tr.remove(); 
    } 
}); 

Просто добавьте класс deleteRow к вашей кнопке удалить/изображение и потерять свой обработчик событий рядных (onclick='functionCall())

Example jsFiddle

Кажется, вы добавив ваш строки динамически, то ваш селектор должен выглядеть следующим образом:

$(document).on('click', '.deleteRow', function() { 
    // ... 
}); 

Кстати. Из .delegate документов:

По JQuery 1.7, .delegate() был заменен методом .on(). Однако для более ранних версий он остается наиболее эффективным средством использования делегирования событий. Дополнительная информация о привязке событий и делегировании содержится в методе .on(). В общем, это эквивалентные шаблоны для двух методов:

+0

Позвольте мне попробовать. Спасибо. – manutd500

+0

@ manutd500 Я допустил ошибку, одного пустого текстового поля было бы достаточно, чтобы удалить таблицу. Ваш подход «каждый» был прав. Я отредактировал его –

+0

Я уверен, что ваше решение должно работать, но почему-то это не так, Когда я попробую.Как вы думаете, связано ли это с тем, что я динамически добавляю новые строки в таблицу? – manutd500

0

Попробуйте это:

function deleteRow(){ 
     if (emptyRow){// isRowEmpty returning emptyRow 
       $('#ProblemsGrid').delegate('td a', 'click', function() { 
       $(this).closest ('tr').remove(); 
        }); 
     } 
} 
0

Попробуйте это.

function isRowEmpty(el){ 
    var emptyRow = true; 
    if(el.val() != "" && el.val() != "....") 
     emptyRow = false; 
    return emptyRow; 
} 

$(document).delegate('#ProblemsGrid td a', 'click', function() { 
    if (isRowEmpty($(this).closest('tr').find('textarea'))){ 
     $(this).closest('tr').remove(); 
    } 
}); 

Fiddle

Смежные вопросы