[英]How can I increment my <p> tag when I clicked add in my HTML table?
這是我的全部代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pre-Enrollment</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/customcss.css">
</head>
<nav>
<ul class="nav nav-tabs">
<li role="presentatoion" class="active"><a href="FromEnrollment.php">Pre-Enrollment</a></li>
<li role="presentation"><a href="Students.php">Students</a></li>
<li role="presentation"><a href="Subjects.php">Subjects</a></li>
</ul>
</nav>
<br>
<body>
<div class="container">
<div class="row"> <!--RED-->
<div class="col-md-3" >
<form id="idNumber" action="FromEnrollment.php" method="POST">
<div class="input-group">
<!-- <input type="text" class="form-control" placeholder="ID NUMBER"> -->
<span class="input-group-btn">
<!--<form action="newPhp.php" method="POST">-->
<input type="text" placeholder="ID NUMBER" class="form-control" name="input">
<input type="submit" value="Enter" name"Enter" class="btn btn-default">
<!--</form>-->
<button class="btn btn-default" type="button" onclick="resetIdNumber()" value="reset">Reset</button>
</span>
</div>
</form>
</div>
<div class="col-md-4 col-md-offset-3">
<select style="width: 120px;">
<option value="All">Overall Term</option>
<option value="First">First Term</option>
<option value="Second">Second Term</option>
<option value="Short">Short Term</option>
</select>
</div>
<div class="col-md-2">
<button class="btn btn-primary" type="button">Apply</button>
<button class="btn btn-default" type="button" onclick="myFunction()" value="reset">Reset</button>
</div>
</div>
<br>
<div class="row" >
<?php
if($_SERVER['REQUEST_METHOD'] == 'POST'){
if( isset($_POST['input']) ){
include 'dbcon.php';
$Idnumber = ($_POST['input']);
$stmt = $pdo->query("SELECT * FROM students WHERE id_number = '$Idnumber'");
$currentTerm = $pdo->query("SELECT * FROM pre_enroll WHERE id_number = '$Idnumber'");
$result = $stmt->fetchAll(PDO::FETCH_ASSOC);
$result2 = $currentTerm->fetchAll(PDO::FETCH_ASSOC);
// $last_name = print_r($result[0]['last_name']);
// $first_name = print_r($result[0]['first_name']);
// $course = print_r($result[0]['course']);
echo "
<div class='col-md-2'>
<p>Name: ";
print_r($result[0]['last_name']);
echo " ";
print_r($result[0]['first_name']);
echo"</p>
</div>";
echo "
<div class='col-md-4'>
<p>Course and Year: ";
print_r($result[0]['course']);
echo"-";
print_r($result[0]['year']);
echo"</p>
</div>";
echo "
<div class='col-md-4'>
<p>Current term: ";
print_r($result2[0]['term']);
echo"</p>
</div>";
// <div class='col-md-4'>
// <p>Current Term: </p>
// </div>;
}
}else{
echo "
<div class='col-md-2'>
<p>Name: </p>
</div>
<div class='col-md-4'>
<p>Course and Year: </p>
</div>
<div class='col-md-4'>
<p>Current Term: </p>
</div>";
}
?>
</div>
<br>
<div class="row">
<div class="col-md-6">
<form id="Subjects" action="#">
<div class="input-group">
<input type="text" id="myInput" onkeyup="filterData()" class="form-control" placeholder="Search for...">
<span class="input-group-btn">
<button class="btn btn-default" type="button" onclick="resetSubjects()" value="reset">Reset</button>
</span>
</div>
</form>
</div>
<div class="col-md-2">
<p>Total Units: <b> </b></p>
</div>
</div>
<br>
<?php
include 'dbcon.php';
$stmt = $pdo->query("SELECT subjects.coursenumber as 'Course No.', subjects.destitle as 'Descriptive Title', enr_stat.term as 'Term', subjects.units as 'Units' FROM subjects INNER JOIN enr_stat ON subjects.coursenumber = enr_stat.coursenumber");
?>
<div class="row">
<div class="col-md-6 col" id="table-wrapper">
<div id="table-scroll">
<table class="table" id="myTable">
<tr>
<th>Course No.</th>
<th>Descriptive Title</th>
<th>Term</th>
<th>Unit</th>
<th></th>
</tr>
<?php
$results = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($results as $row) {
// echo "<form action=''>";
echo "<tr>";
echo "<td>".$row['Course No.']."</td>";
echo "<td>".$row['Descriptive Title']."</td>";
echo "<td>".$row['Term']."</td>";
echo "<td>".$row['Units']."</td>";
echo "<input type='hidden' name='CourseNo' value='".$row['Course No.']."'/>";
echo "<input type='hidden' name='descrp' value='".$row['Descriptive Title']."'/>";
echo "<input type='hidden' name='term' value='".$row['Term']."'/>";
echo "<input type='hidden' name='units' value='".$row['Units']."'/>";
echo "
<td>
<button class='btn btn-default btn-sm' onclick='addDataToLocalStorage(this)'>
<span class='glyphicon glyphicon-plus' aria-hidden='true'></span>
</button>
</td>
";
echo "</tr>";
// echo "</form>";
}
?>
</table>
</div>
</div>
<div class="col-md-6 col" id="table-wrapper">
<div id="table-scroll">
<table class="table" id="copy">
<tr>
<th>Course No.</th>
<th>Descriptive Title</th>
<th>Term</th>
<th>Unit</th>
<th></th>
</tr>
</table>
</div>
</div>
</div>
<div class="col-md-offset-11">
<button class="btn btn-primary" type="button">Apply</button>
<br>
</div>
<script>
function resetIdNumber(){
document.getElementById("idNumber").reset();
}
function resetSubjects(){
document.getElementById("Subjects").reset();
}
function filterData() {
var input, filter, table, tr, td, i;
input = document.getElementById("myInput");
filter = input.value.toUpperCase();
table = document.getElementById("myTable");
tr = table.getElementsByTagName("tr");
for (i = 0; i < tr.length; i++) {
td = tr[i].getElementsByTagName("td")[1];
if (td) {
if (td.innerHTML.toUpperCase().indexOf(filter) > -1) {
tr[i].style.display = "";
} else {
tr[i].style.display = "none";
}
}
}
}
function addDataToLocalStorage(r){
var courseNo = r.parentNode.parentNode.childNodes[0].innerText;
var descriptive = r.parentNode.parentNode.childNodes[1].innerText;
var term = r.parentNode.parentNode.childNodes[2].innerText;
var unit = r.parentNode.parentNode.childNodes[3].innerText;
var t = "<button onclick=clearData(this);deleteRow(this); class='btn btn-default btn-sm'><span class='glyphicon glyphicon-remove' aria-hidden='true'></span></button>";
// alert(courseNo + " " + descriptive + " " + unit);
var list = {
courseNumber: courseNo,
descriptiveTitle: descriptive,
term: term,
units: unit,
};
var jsonObject = JSON.stringify(list);
localStorage.setItem("list" + localStorage.length,jsonObject);
var thatTable = document.getElementById("copy");
var newRow = thatTable.insertRow(-1); //at the last position of the table
var newCell1 = newRow.insertCell(0);
newCell1.innerHTML = courseNo;
var newCell2 = newRow.insertCell(-1);
newCell2.innerHTML = descriptive;
var newCell3 = newRow.insertCell(-1);
newCell3.innerHTML = term;
var newCell4 = newRow.insertCell(-1);
newCell4.innerHTML = unit;
var newCell5 = newRow.insertCell(-1);
newCell5.innerHTML = t;
}
function clearData(r) {
var data = r.parentNode.parentNode.rowIndex;
var data_key = data - 1;
localStorage.removeItem(localStorage.key(data_key));
}
function deleteRow(r) {
var i = r.parentNode.parentNode.rowIndex;
document.getElementById("copy").deleteRow(i);
}
// function refresh(){
// if (localStorage.getItem("list0") != null) { ///if there is "student1" exist in localStorage
// for(i = 0; i <= localStorage.length; i++){
// var stores = localStorage.getItem("list" + i);
// var jsonString = JSON.parse(stores); //convert text to javascript object
// var thatTable = document.getElementById("copy");
// var newRow = thatTable.insertRow(-1); //at the last position of the table
// var newCell1 = newRow.insertCell(0);
// newCell1.innerHTML = courseNo;
// var newCell2 = newRow.insertCell(-1);
// newCell2.innerHTML = descriptive;
// var newCell3 = newRow.insertCell(-1);
// newCell3.innerHTML = term;
// var newCell4 = newRow.insertCell(-1);
// newCell4.innerHTML = unit;
// var newCell5 = newRow.insertCell(-1);
// newCell5.innerHTML = t;
// }
// }
//}
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
</body>
</html>
每當我點擊表格中的添加按鈕時，如何遞增<p>Total Units:<b> </b></p> 。 我的表在我的數據庫中獲取了一些數據，當我點擊添加時，數據將在下一個html表中復制。 我希望每次單擊添加按鈕時，我的<p>標簽將增加主題的單位數。
我嘗試在js中使用stepUp()方法，但我不知道如何在我的html表中獲取單位行的值。 有沒有辦法用我現在的代碼做到這一點？
您可以使用具有特殊ID的范圍
<p>Total Units:<b><span id="countRow"></span></b></p>
然后計算你的行數
document.getElementById("countRow").innerHTML = count
將任何類名設置為這樣的列單位
<td class="unit" >2</td>
每次button click后都運行這樣的each function
var total=0;
$('.unit').each(function(){ total+=parseInt($(this).text()); });
並將任何類名設置為p標記
$('.p_tag_class').html('Total Units:' +total+'<b> </b>');
更新1：
$(document).on('click','[type="button"]',function(){ $('table tbody').last('tr').append('<tr><td >2</td><td class="unit">8</td></tr>'); total=0; $('.unit').each(function(){ total+=parseInt($(this).text()); }); $('.total').text(total); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table border="1px"> <thead> <tr> <th>colum1</th> <th >colum2</th> </tr> </thead> <tbody> <tr> <td >1</td> <td class="unit">6</td> </tr> <tr> <td >2</td> <td class="unit">8</td> </tr> </tbody> </table> <input type="button" value="new row" /> <p class="total" ></p>
單擊時如何在我的$（'p'）標簽上使用toggleClass在華氏和攝氏之間切換
[英]How can I use toggleClass to switch between Fahrenheit and Celsius on my $('p') tag when clicked
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.