Атрибут возвращает неопределенное значение в таблице

ProgramBox

Атрибут возвращает неопределенное значение в таблице

Post author:admin
Запись опубликована:2 мая, 2023
Post category:Вопросы по программированию

#jquery #html #css

#jquery #HTML #css

Вопрос:

Я довольно новичок в jQuery и столкнулся со следующей проблемой. Я создаю веб-сайт, который отображает таблицу, в которой скрыты строки с colspan = 4. При нажатии на строку строка ниже (которая ранее была скрыта) должна выдвигаться, а строка, на которую был сделан щелчок, должна иметь красный фон и белый цвет текста. Если щелкнуть по той же строке снова, строка ниже должна снова переключиться, и выбранная строка должна вернуться к предыдущему макету (в моем случае белый формат и черный текст).

slideToggle работает, но возникают проблемы с цветами. Далее следует HTML en jQuery.

HTML:

 <table>
    <tr>
       <td>Test 1</td>
       <td>Test 2</td>
       <td>Test 3</td>
       <td>Test 4</td>
    </tr>
    <tr>
       <td colspan="4"> This is the first hidden row</td>
    </tr>
</table>

CSS:

 table{
border-collapse: collapse;
}

td{
color: black;
background-color: white;
}

jQuery:

 $(function () {
    $("td[colspan=4]").hide();
    $("table").click(function (event) {
        event.stopPropagation();
        var $target = $(event.target);
        if ($target.closest("td").attr("colspan") > 1) {
            } else {
                $target.closest("tr").next().find("td").slideToggle("fast");

            }


    }
    );
});

Теперь приведенный выше код должен работать, но когда я вставляю if-else, чтобы проверить, скрыта ли скрытая строка или нет, я часто получаю Undefined или постоянно видимый (я проверил через оповещения). То же самое, если я проверяю атрибут color для выбранной строки, я часто получаю значение Undefined.

Я думаю, мне нужно что-то вроде:

Проверка атрибутов выбранного tr:

 if($target.closest("tr").attr("color") === "black"){$target.closest("tr").css("color","white").css("background-color","red");}
else{
$target.closest("tr").css("color","black").css("background-color","white");}

или

Проверка, действительно ли скрытая строка скрыта:

 if($target.closest("tr").next().find("td").is(":visible")){$target.closest("tr").css("color","white").css("background-color","red");}
else{
$target.closest("tr").css("color","black").css("background-color","white");}

Прошу прощения, если этот вопрос слишком расплывчатый. При необходимости я могу увеличить размер.

JSFiddle:https://jsfiddle.net/qeg2zb7e /

1. Где ваш css-код?

2. добавьте рабочую ссылку jsfiddle, чтобы мы могли проверить, что происходит

3.Подсказка: tr.selected { background-color: red } tr.hidden { display: none } .addClass("selected") , .removeClass("hidden")

4. Добавлены CSS и JSFiddle.

5. Возможно, было бы плохой идеей вызывать event.stopPropagation(); все щелчки по таблице, результатом которых является предотвращение появления события в дереве DOM, не позволяя уведомлять о событии любые родительские обработчики. 😉

Ответ №1:

Добавьте этот код jQuery в условие else

$target.closest(«tr»).find(«td»).toggleClass(‘bg-text’);

А также помещает класс (bg-text) в стиль css.

 $(function () {
  $("td[colspan=4]").hide();
  $("table").click(function (event) {
    event.stopPropagation();
    var $target = $(event.target);
    if ($target.closest("td").attr("colspan") > 1) {
    }
    else {
      //add this code
      $target.closest("tr").find("td").toggleClass('bg-text');
      
      $target.closest("tr").next().find("td").slideToggle("fast");
    }
  });
});

 table{
		border-collapse: collapse;
	}
	td{
		color: black;
		background-color: white;
	}

/*toggle class for red background and white text color*/
	.bg-text{
		background: red;
		color: white;
	}

 <!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>Menu Collapse</title>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<body>
<div class="container">
	<div class="row">
		<div class="col-sm-12">
			<table class="table table-bordered">
		    <tr>
		      <td>Test 1</td>
		      <td>Test 2</td>
		      <td>Test 3</td>
		      <td>Test 4</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row - 1</td>
		    </tr>
		    <tr>
		      <td>Test 1.1</td>
		      <td>Test 2.1</td>
		      <td>Test 3.1</td>
		      <td>Test 4.1</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row 1.1</td>
		    </tr>
              <tr>
		      <td>Test 1.2</td>
		      <td>Test 2.3</td>
		      <td>Test 3.4</td>
		      <td>Test 4.5</td>
		    </tr>
		    <tr>
		      <td colspan="4"> This is the first hidden row 1.2</td>
		    </tr>
			</table>
		</div>
	</div>
</div>

</body>
</html>

Ответ №2:

Более простой подход может быть чем-то вроде этого:

Пример jsFiddle

 $('#my-table').on('click', '.open-row',function(){
   var $targets = $('.target-row');
   var $triggers = $('.open-row');
   var $this=$(this).toggleClass('active');
   var currentIndex = $triggers.index($this);
   var $target = $targets.eq(currentIndex).slideToggle('fast');
});

 .open-row.active{
  background-color:red;
  
}
.target-row{
  display:none;
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="my-table">
    <tr class="open-row">
       <td>Test 1</td>
       <td>Test 2</td>
       <td>Test 3</td>
       <td>Test 4</td>
    </tr>
    <tr class="target-row">
       <td colspan="4"> This is the first hidden row</td>
    </tr>
</table>

Объяснение:

$('#my-table').on('click', '.open-row',function(){ Прослушивает щелчки по #my-table и проверяет, нажали ли вы дочерний элемент с классом open-row
var $targets = $('.target-row'); возвращает коллекцию всех скрытых строк
var $triggers = $('.open-row'); возвращает коллекцию всех интерактивных строк
var $this=$(this).toggleClass('active'); переключает класс active на выбранный элемент
var currentIndex = $triggers.index($this); Это возвращает индекс или позицию выбранного элемента в массиве интерактивных элементов
$targets.eq(currentIndex).slideToggle('fast'); Строка выше передается в eq здесь, который возвращает целевую строку с тем же индексом, что и выбранная строка, т. Е. Строка под выбранной строкой, затем вызывает slideToggle для нее

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

2. @ThomasDM обратите внимание, что для этого требуется, чтобы вы добавили идентификатор my-table в таблицу (или какой-либо другой идентификатор) и добавили классы к tr s. Готов поспорить, что один из них отсутствует