テーブル行をレンダリングしている Php コードのブロックは次のとおりです。
実際に私が達成しようとしているのは、最初の行のボタンをクリックすると、ドキュメント準備スクリプトで . hide() を使用して以前は非表示になっていた次の行を表示できるようにすることです。
<?php
echo "<tr>";
echo "<td>"."<button id= \"btnnumber_". $i ." \" class=\"btn info toggler\" data-value=\" $val\">Show Info <i class=\"icon-arrow-down\"></i></button>"."</td>"; // On click of this button I am taking its id in Jquery getting the number at end creating the id of the next row in the Jquery script.
echo "</tr>";
echo "</tr>";
echo "<tr id=\"row_$i \" class=\"info_row\">";// This row is dynamically generated one each row has its unique id like 0 row is having id row_0,1 row is having id row_1 etc.
echo "<td id=\"student_count\">"."students count:"."</td>";
echo "<td id=\"start_date\">"."start date: "."</td>";
echo "<td id =\"end_date\">"."end date: "."</td>";
echo "<td></td>";
echo "</tr>";
?>
この行は、次の JQuery を使用して、ドキュメントの準備ができている状態で非表示にするように最初に設定されています。
$(function(){
$('.info_row').hide();// On document load I am hiding all the element with class info_row.
$('.toggler').toggle(function(){// Then I am toggling between hide and show.
var currentId = $(this).attr('id');
var number = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
var rowId = 'row_' + number;
$("#" + rowId).show();
}, function(){
var currentId = $(this).attr('id');
var lastChar = currentId.substr(currentId.length - (currentId.length - currentId.indexOf("_") - 1));
var rowId = 'row_' + lastChar;
$("#" + rowId).hide();
});
});
トグルを達成できません。つまり、達成しようとしていたように、行が非表示になったり表示されたりしません。
どんな助けでも大歓迎です。