在某一类单击后隐藏所有行

时间：2018-07-28 18:18:15

标签： javascript html css

我有一个表，其中的行具有不同的类。我想要的是，如果单击了分行，则在其下方的所有数据行如果被隐藏则被显示，或者如果被显示则被隐藏。这是表格的示例：

我发现了一个完全符合我需要的stackoverflow thread，但是当我尝试实现它时却不起作用。任何帮助都很棒

这是我的HTML页面。我的表是动态生成的。

p <- ggplot(df) +
  geom_point(aes(x=Pos, y = Percent, color = Read.Length,group = Samples, shape = Samples, size = Nucleotides))+
  scale_shape_manual(values=1:nlevels(df$Samples)) +
  scale_x_continuous(breaks = c(1,seq(2,24,2)))+ 
  theme_bw() +
  theme(axis.line = element_line(colour = "black"),
        panel.grid.major = element_blank(),
        panel.grid.minor = element_blank(),
        panel.border = element_blank(),
        panel.background = element_blank()) +
  scale_color_manual(values = c("lavender", "darkslategray2", "darkseagreen4", "yellow", "blue", "red","deeppink4"))+
  theme(text = element_text(size=12),
        axis.text.x = element_text(angle=90, hjust=1))+
  theme(axis.text=element_text(size=14),
        axis.title=element_text(size=14,face="bold"))
p

$(document).ready(function() {
  $("#gobutton").click(function() {
    var userText = $("#inputText").val();
    var data = processRawData(userText);
    data = getAllData(data);
    data = data.sort()

    // extract all unique years
    var years = [];
    years = extractUniqueYears(years, data);

    // extract all unique semesters
    var semsetersUn = [];
    semsetersUn = extractUniqueSemesters(semsetersUn, data);

    var cumulative = [];
    cumulative = calculateCumulativeGPA(cumulative, data);

    var yearly = [];
    yearly = calculateYearlyGPA(yearly, data, years);

    var semesterly = [];
    semseterly = calculateSemesterlyGPA(semesterly, data, semsetersUn);

    console.log(cumulative);
    console.log(yearly);
    console.log(semseterly);

    tableString = '<table>' + createTableHeaders();

    for (var i = 0; i < yearly.length; i++) {
      tableString = tableString + createYearRow(yearly[i][0], yearly[i][1], yearly[i][2], yearly[i][3]);
      for (var j = 0; j < semseterly.length; j++) {
        if (semseterly[j][4] == yearly[i][4]) {
          tableString = tableString + createSemesterRow(semseterly[j][0], semseterly[j][1], semseterly[j][2], semseterly[j][3]);
        }
      }
    }
    console.log(tableString);
    tableString = tableString + '</tbody></table>';
    $("#gradesTable").append(tableString);
  });

  $('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");
  });


});



function getAllData(data) {
  data = getTwelvePoint(data);
  data = isIncluded(data);
  data = addAcademicYear(data);
  data = addSemester(data);
  data = calculateCredits(data)
  data = convertUnits(data);
  return data;
}

function processRawData(rawData) {
  var format = /[A-Z]+ +(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+/gm;
  var courses = [];
  while ((row = format.exec(rawData)) !== null) {
    var entry = row[0].split('\n');
    courses.push(entry);
  }
  return courses;
}

function getTwelvePoint(courses) {
  for (var i = 0; i < courses.length; i++) {
    // get the Twelve Point grade from the letter grade
    var grade = courses[i][3];
    if (grade == 'A+') {
      courses[i].push(12);
    } else if (grade == 'A') {
      courses[i].push(11);
    } else if (grade == 'A-') {
      courses[i].push(10);
    } else if (grade == 'B+') {
      courses[i].push(9);
    } else if (grade == 'B') {
      courses[i].push(8);
    } else if (grade == 'B-') {
      courses[i].push(7);
    } else if (grade == 'C+') {
      courses[i].push(6);
    } else if (grade == 'C') {
      courses[i].push(5);
    } else if (grade == 'C-') {
      courses[i].push(4);
    } else if (grade == 'D+') {
      courses[i].push(3);
    } else if (grade == 'D') {
      courses[i].push(2);
    } else if (grade == 'D-') {
      courses[i].push(1);
    } else {
      courses[i].push(0);
    }
  }

  return courses;
}

function isIncluded(courses) {
  for (var i = 0; i < courses.length; i++) {
    if ((courses[i][5] == 'In Progress') || (courses[i][3] == 'NC') || (courses[i][3] == 'COM') || (courses[i][5] == 'Transferred')) {
      courses[i].push(false);
    } else {
      courses[i].push(true);
    }
  }

  return courses;
}

function addAcademicYear(courses) {
  for (var i = 0; i < courses.length; i++) {
    if (courses[i][2].substring(5, 9) == 'Fall') {
      courses[i].push(parseInt(courses[i][2].substring(0, 4)));
    } else {
      courses[i].push(parseInt(courses[i][2].substring(0, 4)) - 1);
    }
  }

  return courses;
}

function addSemester(courses) {
  for (var i = 0; i < courses.length; i++) {
    var semsester = courses[i][2].split(' ');
    courses[i].push(semsester[1]);
  }
  return courses;
}

function extractUniqueYears(years, courses) {
  for (var i = 0; i < courses.length; i++) {
    if (courses[i][2].substring(5, 9) == 'Fall') {
      years.push(parseInt(courses[i][2].substring(0, 4)));
    } else {
      years.push(parseInt(courses[i][2].substring(0, 4)) - 1);
    }
  }

  years = Array.from(new Set(years));
  return years;
}

function extractUniqueSemesters(semesters, courses) {
  for (var i = 0; i < courses.length; i++) {
    semesters.push(courses[i][2]);
  }
  semesters = Array.from(new Set(semesters));
  semseters = semesters.sort();
  return semesters;
}

function calculateCredits(courses) {
  for (var i = 0; i < courses.length; i++) {
    courses[i].push(courses[i][4] * courses[i][6]);
  }
  return courses;
}

function convertUnits(courses) {
  for (var i = 0; i < courses.length; i++) {
    courses[i][4] = parseFloat(courses[i][4]);
  }
  return courses;
}

function calculateCumulativeGPA(cumulative, courses) {
  //calculate final gpa
  totalCredits = 0;
  totalUnits = 0.0;
  for (var l = 0; l < courses.length; l++) {
    if (courses[l][7] == true) {
      totalUnits = totalUnits + parseInt(courses[l][4]);
      totalCredits = totalCredits + courses[l][10];
    }
  }
  cumulative = ['Cumulative', totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];
  return cumulative;
}

function calculateYearlyGPA(yearly, courses, years) {
  var finalData = [];
  //calculate yearly gpa
  var totalCredits = 0;
  var totalUnits = 0.0;

  for (var j = 0; j < years.length; j++) {
    totalCredits = 0;
    totalUnits = 0;
    for (var k = 0; k < courses.length; k++) {
      if ((courses[k][8] == years[j]) && courses[k][7] == true) {
        totalUnits = totalUnits + parseInt(courses[k][4]);
        totalCredits = totalCredits + courses[k][10];
      }
    }
    finalData[j] = [years[j].toString() + '-' + (years[j] + 1).toString(), totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];

  }

  for (var i = 0; i < finalData.length; i++) {
    finalData[i].push(parseInt(finalData[i][0]));
  }

  yearly = finalData;
  return yearly;
}

function calculateSemesterlyGPA(semesterly, courses, semesters) {
  var finalData = [];
  //calculate yearly gpa
  var totalCredits = 0;
  var totalUnits = 0.0;

  for (var j = 0; j < semseters.length; j++) {
    totalCredits = 0;
    totalUnits = 0;
    for (var k = 0; k < courses.length; k++) {
      if ((courses[k][2] == semesters[j]) && courses[k][7] == true) {
        totalUnits = totalUnits + parseInt(courses[k][4]);
        totalCredits = totalCredits + courses[k][10];
      }
    }
    finalData[j] = [semesters[j], totalUnits.toString(), totalCredits.toString(), ((totalCredits / totalUnits).toFixed(2)).toString()];

  }

  finalData = academicYearID(finalData);

  semesterly = finalData.sort();
  return semesterly;
}


function academicYearID(data) {
  for (var i = 0; i < data.length; i++) {
    if (data[i][0].substring(5, 9) == 'Fall') {
      data[i].push(parseInt(data[i][0].substring(0, 4)));
    } else {
      data[i].push(parseInt(data[i][0].substring(0, 4)) - 1);
    }
  }
  return data;
}

function createTableHeaders() {
  return '<thead><tr class="tableheader"><th>Time Period</th><th>Units Taken</th><th>Credits Earned</th><th>GPA</th></tr></thead><tbody>'
}

function createYearRow(TimePeriod, Units, Credits, grade) {
  return '<tr class="breakrow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';

}

function createSemesterRow(TimePeriod, Units, Credits, grade) {
  return '<tr class="datarow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';
}
table {
  border-collapse: collapse;
  width: 100%;
}

th,
td {
  padding: 8px;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

tr:hover {
  background-color: #f5f5f5;
}

.datarow {
  display: none;
}

2 个答案:

答案 0 :(得分：1)

在您的情况下，与SO thread you linked中的.first-level行等效的行属于.breakrow类。您可能还想切换一个类，例如“隐藏”而不是“慢速”，因为您要切换它们是否被隐藏。因此

$('.first-level').click(function() {
  $(this).nextUntil('.first-level').toggle("slow");
});

应改写为

$('.breakrow').click(function() {
  $(this).nextUntil('.breakrow').toggle("hide");
});

这将在正确的行上切换“隐藏”类。然后在您的CSS中，您可以实现.hide类，例如

.datarow.hide {
  display: none;
}

请注意您当前也有

.datarow {
  display: none;
}

在您的CSS中，您可能想要删除它，以便仅当它们具有.hide类时才隐藏它们。如果希望在表加载时隐藏它们，可以使用.hide类对其进行初始化。

希望有帮助！

PS-还请注意，您发布的HTML片段缺少几个结束标记</tbody>和</table：）

答案 1 :(得分：0)

似乎您只是缺少jQuery script标记。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


$(document).ready(function(){
	$("#gobutton").click(function() {
		var userText = $("#inputText").val();
		var data = processRawData(userText);
		data = getAllData(data);
		data = data.sort()
		
		// extract all unique years
		var years = [];
		years = extractUniqueYears(years,data);

		// extract all unique semesters
		var semsetersUn = [];
		semsetersUn = extractUniqueSemesters(semsetersUn,data);

		var cumulative = [];
		cumulative = calculateCumulativeGPA(cumulative,data);

		var yearly = [];
		yearly = calculateYearlyGPA(yearly,data,years);

		var semesterly = [];
		semseterly = calculateSemesterlyGPA(semesterly,data,semsetersUn);

		console.log(cumulative);
		console.log(yearly);
		console.log(semseterly);

		tableString = '<table>' + createTableHeaders();
		
		for(var i = 0; i<yearly.length; i++){
			tableString = tableString + createYearRow(yearly[i][0],yearly[i][1],yearly[i][2],yearly[i][3]);
			for(var j = 0; j<semseterly.length; j++){
				if(semseterly[j][4] == yearly[i][4]){
					tableString = tableString + createSemesterRow(semseterly[j][0],semseterly[j][1],semseterly[j][2],semseterly[j][3]);
				}
			}
		}
		console.log(tableString);
		tableString = tableString + '</tbody></table>';
		$("#gradesTable").append(tableString);
	});

	$('.first-level').click(function() {
    $(this).nextUntil('.first-level').toggle("slow");
});


});



function getAllData(data){
	data = getTwelvePoint(data);
	data = isIncluded(data);
	data = addAcademicYear(data);
	data = addSemester(data);
	data = calculateCredits(data)
	data = convertUnits(data);
	return data;	
}

function processRawData(rawData){
	var format = /[A-Z]+ +(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+\n+(.*)+/gm;
	var courses = [];
	while((row = format.exec(rawData)) !== null){
		var entry = row[0].split('\n');
		courses.push(entry);
	}
	return courses;
}

function getTwelvePoint(courses){
	for (var i=0;i<courses.length;i++){
		// get the Twelve Point grade from the letter grade
		var grade = courses[i][3];
		if(grade == 'A+'){
			courses[i].push(12);
		}
		else if(grade == 'A'){
			courses[i].push(11);
		}
		else if(grade == 'A-'){
			courses[i].push(10);
		}
		else if(grade == 'B+'){
			courses[i].push(9);
		}
		else if(grade == 'B'){
			courses[i].push(8);
		}
		else if(grade == 'B-'){
			courses[i].push(7);
		}
		else if(grade == 'C+'){
			courses[i].push(6);
		}
		else if(grade == 'C'){
			courses[i].push(5);
		}
		else if(grade == 'C-'){
			courses[i].push(4);
		}
		else if(grade == 'D+'){
			courses[i].push(3);
		}
		else if(grade == 'D'){
			courses[i].push(2);
		}
		else if(grade == 'D-'){
			courses[i].push(1);
		}
		else{
			courses[i].push(0);
		}
	}

	return courses;
}

function isIncluded(courses){
	for (var i=0;i<courses.length;i++){
		if((courses[i][5] == 'In Progress') || (courses[i][3] == 'NC') || (courses[i][3] == 'COM') || (courses[i][5] == 'Transferred')){
			courses[i].push(false);
		}
		else{
			courses[i].push(true);
		}
	}

	return courses;
}

function addAcademicYear(courses){
	for (var i=0;i<courses.length;i++){
		if(courses[i][2].substring(5,9) == 'Fall'){
			courses[i].push(parseInt(courses[i][2].substring(0,4)));
		}
		else{
			courses[i].push(parseInt(courses[i][2].substring(0,4)) - 1);
		}
	}

	return courses;
}

function addSemester(courses){
	for (var i=0;i<courses.length;i++){
		var semsester = courses[i][2].split(' ');
		courses[i].push(semsester[1]);
	}
	return courses;
}

function extractUniqueYears(years,courses){
	for (var i=0;i<courses.length;i++){
		if(courses[i][2].substring(5,9) == 'Fall'){
			years.push(parseInt(courses[i][2].substring(0,4)));
		}
		else{
			years.push(parseInt(courses[i][2].substring(0,4)) - 1);
		}
	}

	years = Array.from(new Set(years));
	return years;
}

function extractUniqueSemesters(semesters,courses){
	for (var i=0;i<courses.length;i++){
		semesters.push(courses[i][2]);
	}
	semesters = Array.from(new Set(semesters));
	semseters = semesters.sort();
	return semesters;
}

function calculateCredits(courses){
	for (var i=0;i<courses.length;i++){
		courses[i].push(courses[i][4]*courses[i][6]);
	}
	return courses;
}

function convertUnits(courses){
	for (var i=0;i<courses.length;i++){
		courses[i][4] = parseFloat(courses[i][4]);
	}
	return courses;
}

function calculateCumulativeGPA(cumulative,courses){
	//calculate final gpa
	totalCredits = 0;
	totalUnits = 0.0;
	for (var l = 0; l<courses.length; l++){
		if(courses[l][7] == true){
		totalUnits = totalUnits + parseInt(courses[l][4]);
		totalCredits = totalCredits + courses[l][10];
	}
}
	cumulative=['Cumulative',totalUnits.toString(),totalCredits.toString(),((totalCredits/totalUnits).toFixed(2)).toString()];
	return cumulative;
}

function calculateYearlyGPA(yearly,courses,years){
	var finalData = [];
	//calculate yearly gpa
	var totalCredits = 0;
	var totalUnits = 0.0;

	for (var j = 0; j<years.length; j++){
		totalCredits = 0;
		totalUnits = 0;
		for(var k = 0; k<courses.length; k++){
			if((courses[k][8] == years[j]) && courses[k][7] == true){
				totalUnits = totalUnits + parseInt(courses[k][4]);
				totalCredits = totalCredits + courses[k][10];
			}
		}
		finalData[j]=[years[j].toString() + '-' + (years[j]+1).toString(),totalUnits.toString(),totalCredits.toString(),((totalCredits/totalUnits).toFixed(2)).toString()];

	}

	for(var i = 0; i<finalData.length; i++){
		finalData[i].push(parseInt(finalData[i][0]));
	}

	yearly = finalData;
	return yearly;
}

function calculateSemesterlyGPA(semesterly,courses,semesters){
	var finalData = [];
	//calculate yearly gpa
	var totalCredits = 0;
	var totalUnits = 0.0;

	for (var j = 0; j<semseters.length; j++){
		totalCredits = 0;
		totalUnits = 0;
		for(var k = 0; k<courses.length; k++){
			if((courses[k][2] == semesters[j]) && courses[k][7] == true){
				totalUnits = totalUnits + parseInt(courses[k][4]);
				totalCredits = totalCredits + courses[k][10];
			}
		}
		finalData[j]=[semesters[j],totalUnits.toString(),totalCredits.toString(),((totalCredits/totalUnits).toFixed(2)).toString()];

	}

	finalData = academicYearID(finalData);

	semesterly = finalData.sort();
	return semesterly;
}


function academicYearID(data){
	for (var i = 0;i<data.length;i++){
		if (data[i][0].substring(5,9) == 'Fall'){
			data[i].push(parseInt(data[i][0].substring(0,4)));
		}
		else{
			data[i].push(parseInt(data[i][0].substring(0,4))-1);	
		}
	}
	return data;
}

function createTableHeaders(){
	return '<thead><tr class="tableheader"><th>Time Period</th><th>Units Taken</th><th>Credits Earned</th><th>GPA</th></tr></thead><tbody>'
}

function createYearRow(TimePeriod,Units,Credits,grade){
	return '<tr class="breakrow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';

}

function createSemesterRow(TimePeriod,Units,Credits,grade){
	return '<tr class="datarow"><td>' + TimePeriod.toString() + '</td><td>' + Units.toString() + '</td><td>' + Credits.toString() + '</td><td>' + grade.toString() + '</td></tr>';
}
table {
	border-collapse: collapse;
	width: 100%;
}

th, td {
	padding: 8px;
	text-align: center;
	border-bottom: 1px solid #ddd;
}
tr:hover {background-color:#f5f5f5;}

.datarow {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<thead>
   <tr class="tableheader">
      <th>Time Period</th>
      <th>Units Taken</th>
      <th>Credits Earned</th>
      <th>GPA</th>
   </tr>
</thead>
<tbody>
   <tr class="breakrow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="breakrow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="breakrow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="breakrow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   <tr class="datarow">
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
   </tbody>
   </table>
   <button id="gobutton">
   Go
   </button>

相关问题
最新问题