如何在模态内提交时隐藏表格列
在用户个人资料页面上，我有一个表格，标题不在顶部，而是在左侧，描述在右侧。
当用户单击“编辑配置文件”时，将打开一个模式。
在模式中，我想隐藏表列，或者在这种情况下，我想通过选择复选框然后单击“保存更改”按钮来隐藏行。单击“保存更改”后，他们的选择也应保存并在其个人资料上更新。
我还希望在注册后首次访问其个人资料页面时已选中其中一些复选框。然后他们应该可以在那里进行更改。
我的代码无法正常工作，我尝试了所有我可以在隐藏列中找到的内容...我已经找了几天了。任何帮助深表感谢！
TABLE
<div class="row">
<table class="table table-responsive-sm" id="profileTable" id="table-pagination" cellspacing="0" style="width:100%" >
<tbody>
<?php
$sql = "SELECT `dancing_since`, `dancer_dob`, `school`, `school_code`,`teacher_name`, `class_location`, `date_enrolled`, `date_firstdance`, `first_dance_name`, `current_lvl` FROM `dancers` WHERE name = '$name' AND dancer_name = '$dancerName'";
$res = mysqli_query($con,$sql);
//if($res==FALSE){
//die('there was an error running query [' . $con->error . ']');
// }
while($row=mysqli_fetch_array($res)){
echo '
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
';
}
?>
</tbody>
MODAL
<!--POPUP MODAL FORM-->
<div class="formModal">
<div class="formModal text-right">
<button type="button" class="btn btn-outline-primary editprofile-btn" data-toggle="modal" data-target=".bd-editprofile-modal-lg">Edit Profile</button>
</div>
<!-- Modal -->
<div class="modal fade bd-editprofile-modal-lg" id="editProfile" tabindex="-1" role="dialog" aria-labelledby="editProfile" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered modal-success modal-lg" role="document">
<div class="modal-content">
<form id="updateForm" method="post" class="form-horizontal" name="tcol" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" role="form" data-toggle="validator">
<div class="controls">
<!--Modal cascading tabs-->
<div class="modal-c-tabs">
<!-- Nav tabs -->
<ul class="nav nav-tabs tabs-2 light-blue darken-3" role="tablist">
<li class="nav-item">
<a class="nav-link active" data-toggle="tab" href="#panel7" role="tab">Edit Profile Information</a>
</li>
<li class="nav-item">
<a class="nav-link" data-toggle="tab" href="#panel8" role="tab">Change visiblity</a>
</li>
</ul>
<!-- Tab panels -->
<div class="tab-content">
<!--Panel 7-->
//some code for edit profile form
<!-- PANEL 8 -->
<div class="tab-pane fade" id="panel8" role="tabpanel">
<div class="modal-body">
<div class="container-fluid">
<div class="panel-8-heading text-center">
<b>Select up to 10 abilities you would like to appear on your profile.</b>
</div>
<br>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col1" class="hidecol" id="col_1" data-column="0"/> Dancing Since
</div>
<div class="col-sm-4">
<input type="checkbox" name="col2" class="hidecol" id="col_2" checked="checked" data-column="1" /> D.O.B
</div>
<div class="col-sm-4">
<input type="checkbox" name="col3" class="hidecol" id="col_3" data-column="2"/> School
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" name="col4" class="hidecol" id="col_4" checked="checked" data-column="3"/> School Code
</div>
<div class="col-sm-4">
<input type="checkbox" name="col5" class="hidecol" id="col_5" checked="checked" data-column="4"/> Teacher's Name
</div>
<div class="col-sm-4">
<input type="checkbox" name="col6" class="hidecol" id="col_6" checked="checked" data-column="5"/> Class Location
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col7" id="col_7" checked="checked" data-column="6"/> Date Enrolled
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col8" id="col_8" data-column="7" /> First competition
</div>
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col9" id="col_9" checked="checked" data-column="8"/> Date of First dance
</div>
</div>
<div class="row">
<div class="col-sm-4">
<input type="checkbox" class="hidecol" name="col10" id="col_10" data-column="9" /> Current Level
</div>
<div class="col-sm-4">
</div>
<div class="col-sm-4">
</div>
</div>
</div>
</div>
</div>
<!-- PANEL 8 END -->
</div>
</div>
<!-- MODAL FOOTER -->
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary" name="save" id="save">Save changes</button>
</div>
</div>
</form>
</div>
</div>
JQUERY
$(document).ready(function() {
//modal checkbox
$('#profileTable tr td:nth-child(3)').hide();
});
编辑
下面是用户表和模态与复选框的图像。我希望能够隐藏整行。因此，如果用户取消选择位置，则在他们的个人资料上，他们将不再看到“位置：新泽西州”
配置文件表
MODAL
3 个答案:
答案 0 :(得分：0)
我建议一种稍微不同的方法：
- 您编写了一个模式表单，用户可以在其中选择他或她希望在个人资料页面中可见的内容。
- 将该数据提交到服务器。
- 刷新页面
- 在创建新页面时，仅返回用户在表单中（从设置中）选择的数据，使用过滤器（或一组if条件，因为这似乎是家庭作业）来选择用户想要的数据见。
- 仅返回必要的数据
- 渲染它。 （您无需隐藏数据）
这种方法有几个好处：
- 您避免了隐藏/显示数据的复杂性
- 您避免显示不应显示的数据：用户即使编辑html仍可以查看隐藏的列，这在Web开发中是一个很大的禁忌。
- 向配置文件添加新数据更加容易
- 您可以根据需要轻松保存用户首选项
如果想更进一步，您可以尝试通过编写ajax代码来动态地更新行，而无需重新加载整个页面，从而改善上述情况。
将不会给出任何特定的代码示例，因为这是一项冗长的任务，而且看起来像是课堂或家庭作业。祝你好运！
答案 1 :(得分：0)
我不知道这仅仅是代码的提取还是错误，因为我找不到模态中定义的任何<table>。从您的jquery代码中，您需要一个ID为profileTable的元素。
我建议您说明您尝试过的内容以及不起作用的内容。此外，您可以较小程度地划分问题并确定根本原因。例如。尝试在模态之外使用隐藏/显示机制，或分解jquery代码（如果$('#profileTable tr td:nth-child(3)')不返回任何内容，则.hide()将无效）
更新1
我认为您正在尝试隐藏表格列（垂直列）。首先，该表具有2个ID，profileTable和table-pagination。删除任何一个，以便表具有一个唯一的ID。由于#是一个ID选择器，因此多个ID可能会使CSS混乱。其次，我们将“模式”放在一边。浏览器不了解模态，只知道有很多嵌套的html元素具有不同的样式。不论是否使用模式，javascript都应以相同的方式工作。它可以帮助您分解模型并更容易找到根本原因。
我根据您提供的代码片段进行了演示。底部的两个按钮显示了如何隐藏和显示列。
https://codepen.io/anon/pen/oMpRbq
更新2
了解要求并更新演示。隐藏/显示行而不是列。概念几乎相同，不同之处在于选择tr而不是td。我只勾选了2个复选框，因为它们都相同。
$('#filter-panel').on('change', 'input', function(e) {
var rowIndex = $(e.currentTarget).val();
$('#profileTable tr:nth-child(' + rowIndex + ')').toggle();
});table {
border: 1px solid black;
border-collapse: collapse;
}
table td,
table th {
border: 1px solid black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
<table class="table table-responsive-sm" id="profileTable" cellspacing="0" style="width:100%">
<tbody>
<tr>
<th class="tcol1">Dancing Since:</th>
<td class="tcol1">'.$row["dancing_since"].'</td>
</tr>
<tr>
<th class="tcol2">D.O.B:</th>
<td class="tcol2">'.$row["dancer_dob"].'</td>
</tr>
<tr>
<th class="tcol3">School:</th>
<td class="tcol3">'.$row["school"].'</td>
</tr>
<tr>
<th class="tcol4">School Code:</th>
<td class="tcol4">'.$row["school_code"].'</td>
</tr>
<tr>
<th class="tcol5">Teachers Name:</th>
<td class="tcol5">'.$row["teacher_name"].'</td>
</tr>
<tr>
<th class="tcol6">Class Location:</th>
<td class="tcol6">'.$row["class_location"].'</td>
</tr>
<tr>
<th class="tcol7">Date Enrolled:</th>
<td class="tcol7">'.$row["date_enrolled"].'</td>
</tr>
<tr>
<th class="tcol8">First Feis</th>
<td class="tcol8">'.$row["first_dance_name"].'</td>
</tr>
<tr>
<th class="tcol9">Date of First Feis:</th>
<td class="tcol9">'.$row["date_firstdance"].'</td>
</tr>
<tr>
<th class="tcol10">Current Level:</th>
<td class="tcol10">'.$row["current_lvl"].'</td>
</tr>
</tbody>
</table>
<br /><br />
<div id="filter-panel">
<input type="checkbox" name="vehicle" value="1" checked/> dancing since
<input type="checkbox" name="vehicle" value="2" checked/> d.o.b
</div>
答案 2 :(得分：0)
HTML
<table border="1" id="myTable">
<tbody>
<tr id='trow1'>
<th>Dancing Since:</th>
<td>2012</td>
</tr>
<tr id='trow2'>
<th>D.O.B:</th>
<td>1994</td>
</tr>
<tr id='trow3'>
<th>School:</th>
<td>ABC</td>
</tr>
<tr id='trow4'>
<th>School Code:</th>
<td>1001</td>
</tr>
<tr id='trow5'>
<th>Teachers Name:</th>
<td>Badai</td>
</tr>
</tbody>
</table>
<button id="myBtn_colSwitch" style="margin-left: 2%;" onClick="columnSwitchMODAL()">Row Filter</button> <!-- onclick opens MODAL -->
<!-- The Modal Column Switch -->
<div id="myModal_colSwitch" class="modal_colSwitch">
<div class="modal-content_colSwitch">
<span class="close_colSwitch">×</span>
<input id='1' type='checkbox' onClick='javascript:displayROW(1);' checked>Dancing Since<br>
<input id='2' type='checkbox' onClick='javascript:displayROW(2);' checked>D.O.B<br>
<input id='3' type='checkbox' onClick='javascript:displayROW(3);' checked>School<br>
<input id='4' type='checkbox' onClick='javascript:displayROW(4);' checked>School Code<br>
<input id='5' type='checkbox' onClick='javascript:displayROW(5);' checked>Teachers Name<br>
</div>
</div>
<!-- Column Switching ENDS -->
CSS
/* Column Switch */
.modal_colSwitch
{
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content_colSwitch
{
background-color: #fefefe;
margin: 100px auto;
padding: 60px;
border: 1px solid #888;
width: 25%;
height: 25%;
overflow-y: scroll;
box-shadow: 5px 10px 18px #888888;
}
#myBtn_colSwitch
{
background-color: #6599FF;
border: none;
color: white;
padding: 10px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
cursor: pointer;
}
/* The Close Button */
.close_colSwitch {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close_colSwitch:hover,
.close_colSwitch:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* Column Switch ENDS */
/* Table Style */
#myTable {
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
border-collapse: collapse;
width: 30%;
margin: 0 auto;
}
#myTable td, #myTable th {
border: 1px solid #ddd;
padding: 8px;
}
#myTable tr:nth-child(even){background-color: #f2f2f2;}
#myTable tr:hover {background-color: #ddd;}
JAVASCRIPT
function columnSwitchMODAL()
{
var modal_colSwitch = document.getElementById('myModal_colSwitch');
var btn_colSwitch = document.getElementById("myBtn_colSwitch");
var span_colSwitch = document.getElementsByClassName("close_colSwitch")[0];
btn_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "block";
}
span_colSwitch.onclick = function()
{
modal_colSwitch.style.display = "none";
}
window.onclick = function(event)
{
if (event.target == modal_colSwitch)
{
modal_colSwitch.style.display = "none";
}
}
}
function displayROW(row_no)
{
var hideDisplay = '';
if(document.getElementById(row_no).checked)
hideDisplay = 'table-row';
else
hideDisplay = 'none';
if(row_no == 1) document.getElementById('trow1').style.display = hideDisplay;
else if(row_no == 2) document.getElementById('trow2').style.display = hideDisplay;
else if(row_no == 3) document.getElementById('trow3').style.display = hideDisplay;
else if(row_no == 4) document.getElementById('trow4').style.display = hideDisplay;
else if(row_no == 5) document.getElementById('trow5').style.display = hideDisplay;
}
希望这会有所帮助！
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？