#javascript #jquery #for-loop
#javascript #jquery #цикл for
Вопрос:
У меня есть таблица, и я хочу, чтобы с ней было выполнено некоторое действие с помощью цикла for в JavaScript. Итак, кто-нибудь может сказать мне, каким будет код для этого. что цикл for будет работать для всех строк таблицы. На самом деле мне нужно удалить класс из таблицы, а затем после этого я должен применить класс к определенной строке. В чем моя задача, я должен выделить выделенную строку без выделения. когда я выбираю любую строку, она выделяется, но когда я выбираю другую строку, она остается выделенной, и другая тоже. итак, я хочу удалить выбранный класс из всех строк таблицы, а затем применить выбранный класс к определенной строке. МОЙ КОД:
<style type="text/css">
.highlight
{
background-color: Red;
}
.selected
{
background-color: #ffdc87;
}
</style>
<script type="text/javascript">
function Select(obj) {
if (obj.className != 'selected') {
obj.className = 'selected';
var tbl = document.getElementById("Repaddressorbbl")
var firstRow = tbl.getElementsByTagName("TR")[0];
}
else {
obj.className = 'prev_class';
var tbl = document.getElementById("Repaddressorbbl")
var firstRow = tbl.getElementsByTagName("TR")[0];
}
}
</script>
Комментарии:
1. Вопрос не понятен. Что на самом деле вам нужно? Можете ли вы привести какой-нибудь неработоспособный фрагмент кода на jsfiddle. чистый или jsbin.com ?
2. Для вашего обновленного вопроса вам не нужен цикл for, вы можете сделать это с помощью одной строки jQuery. Как насчет того, чтобы показать свой существующий код, чтобы люди, пишущие ответы, могли вписаться в него?
Ответ №1:
jQuery имеет неявную итерацию, поэтому вам не нужно вручную перебирать выбранные строки
// remove all "highlight" classes from all <tr> elements
$("#your-table tr").removeClass("highlight");
// highlight row 3
$("#your-table tr:eq(2)").addClass("highlight");
// highlight row that belongs to a specific <td>
$("#my-td").parents("tr").addClass("highlight")
// etc
После того, как вы удалили все highlight
классы, вы должны быть в состоянии довольно легко повторно выделить тот <tr>
, который вы хотите.
Если вам нужна дополнительная помощь, дайте мне знать 🙂
Комментарии:
1. Что это за
:eq(2)
псевдокласс? Это что-то вроде nth-child?2. @MoeSweet это совершенно верно. В этом примере это был бы третий
<tr>
элемент.
Ответ №2:
в jquery попробуйте:
var aaa= $('#yourdivid tr:gt(0)');
$.each(aaa, function(indx, item) {
////your code
}
Комментарии:
1. jQuery имеет неявную итерацию, поэтому вам не нужно выполнять итерации вручную для подобных задач.
2. @macek — этот ответ был опубликован до того, как вопрос был обновлен, чтобы сказать, зачем ему нужен цикл for.
3. @nnnnnn большое спасибо. ответ на вопрос — это сообщение перед редактированием вопроса.
Ответ №3:
В POJS вы можете использовать коллекцию строк таблицы для перебора всех строк:
var rows = tableElement.rows;
for (var i=0, iLen=rows.length; i<iLen; i ) {
/* do something with rows[i] */
}
rows — это живой список узлов. В некоторых браузерах быстрее сначала преобразовать его в массив, потому что браузер не знает, был ли изменен список или нет, поэтому при каждом обращении к нему он обновляется.
Более современные браузеры достаточно умны, чтобы не делать этого, но независимо от того, является ли это проблемой только в больших таблицах или если производительность является проблемой.
В вашем коде:
var firstRow = tbl.getElementsByTagName("TR")[0];
может быть:
var firstRow = tbl.rows[0];