We Keep Coding

Refresh tag value with dynamically generated data

I have a main php page displaying dynamically generated cards through a loop. I am trying to refresh the content for certain tags, but it doesn't seem to work so far.
This is my main.php file:
<div class="col" style="width: ">
<div class="card shadow-sm h-100 border-dark rounded" style="width: 240px; background-color: #ededed">
<span class="mySpan">
<div class="container">
<input type="hidden" class="cardid" name="mycardId" value="
<?php echo $cardId ?>" id="cardid">
<div class="card-body px-0 py-0">
<table id="firstTable" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="width: 237px; table-layout: fixed;">
<thead>
<tr>
<th colspan="3" id="row1field1" name="row1field1" class="text-center py-1 px-1 fw-bold
<?php if($selectField == "EXP") echo "text-decoration-line-through" ?>" style="max-width: 237px; text-transform: uppercase; font-size: 18px;" contenteditable="true" data-name="row1field1"> <?php echo $row1field1; ?> </th>
</tr>
</thead>
</table>
<table id="row4" class="table table-responsive-md table-striped table-borderless text-center mb-0" style="max-width: 238px; min-height: 50px; border: thin solid lightgray">
<tr>
<td name="row4field1" id="row4field1" class=" py-1" style="max-width: 104px; border-right: thin solid gray; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field1; ?> </strong>
</h6>
</td>
<td name="row4field2" id="row4field2" class=" py-1" style="max-width: 104px; text-transform: uppercase;" contenteditable="true">
<h6>
<strong> <?php echo $row4field2; ?> </strong>
</h6>
</td>
</tr>
</table>
</div>
<div>
</span>
</div>
</div>
This is what I've tried so far using javascript:
$(document).ready(function(){
setInterval(function(){
$("#row1field1").load(" #row1field1 > *");
}, 5000);
});
Unfortunately, after the refresh, all content from row1field1 is gone. I believe this could be because the IDs are not unique, but I'm using the hidden value cardId to differentiate each card. Any advice on how to properly refresh these dynamic content is greatly appreciated.

Display content from DIV

I have the two text button Main Folder & Second Folder using the <a> tag inside the div element.
<div class="zf-folder">
<!-- another div elements -->
Main Folder
<!-- another div elements -->
</div>
Unfortunately, I have to click the text to move tabs, can't use the button (div) column to display the content.
How can I display tab content not only from text, but can from clicking on div element.
Please help me, I give a lot of code on JSFiddle.
Thanks in advance
$(document).ready(function() {
$('table.table').DataTable();
$('a[data-toggle="tab"]').on('shown.bs.tab', function(e) {
$($.fn.dataTable.tables(true)).DataTable().columns.adjust();
});
});
._tabFolder {
cursor: pointer;
position: relative;
}
._tabFolder:hover {
background-color: rgba(255, 255, 255, 0.2)
}
._tabFolder:active {
background-color: rgba(29, 33, 41, 1)
}
._itemPosition {
align-items: center;
display: flex
}
._sideFolder {
background-color: none;
height: 90%;
left: 0;
position: absolute;
top: 2px;
width: 5px
}
._iconText:hover ._1i5y,
.uiPopover.selected ._1i5y {
display: block
}
._iconText {
align-items: center;
display: flex;
justify-content: space-between;
width: 100%;
margin-left: 13px;
}
._iconFolder,
._1i5x,
._1i5w {
display: inline-block;
margin-right: 5px;
vertical-align: middle
}
._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -437px -21px;
height: 24px;
position: relative;
width: 24px
}
._5bme ._iconFolder {
background-image: url(/rsrc.php/v3/yE/r/miCSJRxMvJi.png);
background-repeat: no-repeat;
background-size: auto;
background-position: -412px -21px
}
._icon-col {
height: 16px;
left: 4px;
position: absolute;
top: 4px;
width: 16px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="column-folder">
<ul class="nav nav-tabs" role="tablist">
<!-- *********** MAIN FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Main Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** MAIN FOLDER BUTTON ************* -->
<!-- *********** SECOND FOLDER BUTTON ************* -->
<div class="zf-folder">
<li role="presentation" class="active">
<div id="tabFolder" class="_tabFolder _itemPosition" role="presentation" style="height: 40px;border-bottom:1px groove; user-select: none;">
<div class="_sideFolder"></div>
<div class="_iconText" style="width: 215px">
<div class="ellipsis">
<div class="_iconFolder">
<div class="_icon-col">
</div>
</div>
Second Folder
</div>
</div>
</div>
</li>
</div>
<!-- *********** SECOND FOLDER BUTTON ************* -->
</ul>
</div> <!-- Zf-Folder -->
<div class="tab-content">
<div role="tabpanel" class="tab-pane fade in active" id="mainTab">
<div class="row">
<div class="col-md-6">
<h3>Main Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="pendingOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${pendingOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-success btn-xs approve-off" type="submit" value="approve">
<span class="fa fa-check-square-o"></span> Approve
</button>
<button th:id="${off.id}" class="btn btn-danger btn-xs reject-off" type="submit" value="reject">
<span class="fa fa-times"></span> Reject
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>
<div role="tabpanel" class="tab-pane fade in" id="example1-tab2">
<div class="row">
<div class="col-md-6">
<h3>Second Folder</h3>
</div>
</div>
<div class="table-responsive">
<table id="approvedOffTable" class="table table-bordered table-hover table-striped">
<thead>
<tr>
<th>Name</th>
<th>Start Date</th>
<th>End Date</th>
<th>Leave Type</th>
<th>Remarks</th>
<th>Status</th>
<th>Operation</th>
</tr>
</thead>
<tbody>
<tr data-th-each="off : ${approvedOffList}">
<td data-th-text="${off.user.name}">...</td>
<td data-th-text="${off.startDate}">...</td>
<td data-th-text="${off.endDate}">...</td>
<td data-th-text="${off.leaveType}">...</td>
<td data-th-text="${off.remarks}">...</td>
<td data-th-text="${off.status}">...</td>
<td>
<input hidden="hidden" name="offId" th:value="${off.id}" />
<button th:id="${off.id}" class="btn btn-danger btn-xs delete-ocoff" type="submit" value="delete">
<span class="fa fa-times"></span> Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
</div>

You can add a span inside your link:
<a href="#mainTab" aria-controls="mainTab" role="tab" data-toggle="tab">
Main Folder
<span class="hyperspan"></span>
</a>
And CSS:
.hyperspan
{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
}

This should work for you. Just add these lines to your JS:
$(".mainFolder").click(function (e) {
$(this).find("a")[0].click();
});
$(".secondFolder").click(function (e) {
$(this).find("a")[0].click();
});
Working JSFiddle https://jsfiddle.net/Karadjordje1389/h14uv4ww/

Scala dynamic src in iframe not working

I was trying to integrate an iframe into one tool to administer kafka, Trifecta. In consumers.html file, i made modifications like below;
<table style="width: 100%; border: 1px solid #dddddd">
<tr style="border-bottom: 1px solid #dddddd">
<th class="col-md-3 left">Partition / Owner</th>
<th class="col-md-3 left">Topic</th>
<th class="col-md-3 left">Consumer</th>
<th class="col-md-2 left">Remaining</th>
<th class="col-md-1 center">Last Updated</th>
<th class="col-md-1 center">Monitor</th>
</tr>
<tr ng-repeat="coffset in t.offsets | orderBy:'partition'">
<td class="left" title="{{ fixThreadName(t.consumerId, t.threadId) }}">
{{ coffset.partition }}
<span ng-show="getConsumerHost(consumer, coffset)" class="small">
: {{ getConsumerHost(consumer, coffset) }}
(<span class="kafkaProtocolVersion">{{ getConsumerVersion(consumer, coffset) }}</span>)
</span>
<span ng-hide="getConsumerHost(consumer, coffset)" class="small null">
: Consumer information unavailable
</span>
</td>
<td class="left">
{{ coffset.topicEndOffset }}
<span class="delta_topic small" ng-show="getTopicPartitionDelta(t.topic, coffset.partition)">
<img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ getTopicPartitionDelta(t.topic, coffset.partition) | number }}
</span>
</td>
<td class="left">
<a ng-click="switchToMessage(coffset.topic, coffset.partition, coffset.offset)">{{ coffset.offset || 0 }}</a>
<span class="delta_topic small" ng-show="coffset.deltaC">
<img src="/assets/images/tabs/inspect/arrow_topic.gif"> {{ coffset.deltaC | number }}
</span>
</td>
<td class="left">
{{ getMessagesLeft(coffset) | number }}
<span class="delta_consumer small" ng-show="coffset.deltaC">
<img src="/assets/images/tabs/inspect/arrow_consumer.gif"> {{ coffset.deltaC | number }}
</span>
</td>
<td class="center small">
<span ng-show="coffset.lastModifiedTime">{{ coffset.lastModifiedTime | duration }}</span>
<span ng-hide="coffset.lastModifiedTime" class="null">N/A</span>
</td>
<td class="center small">
<a target="_blank" href="http://192.168.1.12:9020/#/group/{{consumer.consumerId}}/{{ t.topic }}">click</a>
</td>
</tr>
<tr>
<td colspan="6" style="height:400px;overflow:hidden" consumer="{{consumer.consumerId}}" topic="{{t.topic}}">
<iframe class="graphiframe" src="http://192.168.1.12:9020/graph.html#/group/{{consumer.consumerId}}/{{t.topic}}" frameborder="0" style="overflow:hidden" height="100%" width="100%">Loading...</iframe>
</td>
</tr>
</table>
The href of a is working, but iframe is not working even if the links same. How can i fix this?
Thank you.

Check the security headers: https://www.playframework.com/documentation/2.6.x/SecurityHeaders#Configuring-the-security-headers
Play 2.6 sets the X-Frame-Options to DENY by default, so your page will not be displayed in iframe:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/X-Frame-Options
Setting the frameOptions in the application.conf to null must fix your problem:
play.filters.headers.frameOptions = null

Javascript Not working on form submit

I have wrote javascript in php file the thing is that i want to select input from dropdown using javascript the default value in dropdown is SELECT and when i submit the form i need the alert message like please select value in drop down lable. and apart from this i also need this for all dropdown option.wherever it found "SELECT" alert should be there with respective lable
My try is:
<?php
include("$_SERVER[DOCUMENT_ROOT]/riteshproject/config.php"); ?>
<?php if(isset($_POST['empsubmit'])) {
if(isset($_POST['areaname']) && isset($_POST['flat']) &&
isset($_POST['rentsale'])) {
$an=$_POST['areaname']; $flat=$_POST['flat'];
$rentsale=$_POST['rentsale'];
$_SESSION['an']=$an; $_SESSION['flat']=$flat; $_SESSION['rentsale']=$rentsale; }
} if(isset($_REQUEST['unsetsession'])) { session_destroy();;
header('location:home.php'); break; } ?>
<!DOCTYPE html> <html lang="en"> <head> <title>Shree Shree
Property,Kolhapur</title> <meta charset="utf-8"> <meta
name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="home.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script
src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<style>
/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
margin-bottom: 0;
border-radius: 0;
}
/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {height: 450px}
/* Set gray background color and 100% height */
.sidenav {
padding-top: 20px;
background-color: #f1f1f1;
height: 100%;
}
/* Set black background color, white text and some padding */
footer {
background-color: #555;
color: white;
padding: 1em 15px; margin-top: 50px;
border-radius: 0;
}
/* On small screens, set height to 'auto' for sidenav and grid */
#media screen and (max-width: 767px) {
.sidenav {
height: auto;
padding: 15px;
}
.row.content {height:auto;} .active { background-color: #00bfff; }
} .col-sm-2{background-color: gray;} .col-sm-8{background-color: #e0e0eb; border-radius: 25px;}
.mainBlock4{background-color: gray; overflow: scroll; height:
220px;} .mainBlock5{background-color: gray; overflow: scroll;
height: 240px;} th{text-align: center; background-color:black;
color:white;} .td1{color:black;}
.tr1:nth-child(even) {
background-color: #e0e0eb; } .trclose{} .closebutton{ border-collapse: collapse;} .button {
background-color: black;
border-radius: 10px;
color: white;
padding: 0.1px 8px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 2px 2px;
cursor: pointer; border: 2px solid red;} .button:hover {
background-color: gray; /* Green */
color: white;
</style> </head> <body>
<nav class="navbar navbar-inverse"> <div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<img src="../riteshproject/logo.png" align="center" style="width:70px;height:50px;">
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li>Home</li> <li class="current" id="dddd"><a
href="../riteshproject/aboutus.php" >About US</a></li> <li>Contact US</li>
<li>Add Property</li> <li>Luxarious Property</li> <li><a href="#">Property For
Sale</a></li> <li>Other Services</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="../riteshproject/Login/login.php"><span class="glyphicon glyphicon-log-in"></span><img
src="../riteshproject/login1.jpg" width="60" height="25"></a></li>
</ul>
</div> </div> </nav> <div class="container-fluid text-center"> <div class="row content">
<div class="col-sm-2 sidenav" align="center" id="2">
<head>
<title></title>
<script type="text/javascript">
var picPaths = ['../riteshproject/img/prop1.jpg','../riteshproject/img/prop2.jpg','../riteshproject/img/prop3.jpg','../riteshproject/img/prop4.jpg',
'../riteshproject/img/prop5.jpg'];
var curPic = -1;
//preload the images for smooth animation
var imgO = new Array();
for(i=0; i < picPaths.length; i++) {
imgO[i] = new Image();
imgO[i].src = picPaths[i];
}
function swapImage() {
curPic = (++curPic > picPaths.length-1)? 0 : curPic;
imgCont.src = imgO[curPic].src;
setTimeout(swapImage,2000);
}
window.onload=function() {
imgCont = document.getElementById('imgBanner');
swapImage();
}
</script>
</head>
<body>
<div>
<img id="imgBanner" src="" alt="" />
</div>
</body>
<div>
<p>Link</p>
<p>Link</p>
<p>Link</p>
</div>
</div>
<div class="col-sm-8 text-left"> <form action="" method="POST" onsubmit="notSELECT()">
<table><tr><td><h4><b>Welcome To Shree Shree Property,Kolhapur</b></h4></td></tr></table>
<hr>
<h5><b><i><marquee width="365px" height="10px" direction=slide BEHAVIOR=ALTERNATE left:355px>Search Property in
kolhapur... </marquee></i></b></h5>
</hr>
<table> <tr> </tr> <tr> </tr> <tr> <td width='35px'></td> <td>
<select name="rentsale" id="rentsale" value="select">
<option>RENT</option>
<option>SALE</option>
</select>
</td>
<td><input type="radio" name="radio" value="flat" checked>FLAT</td>
<td width='35px'></td> <td><input type="radio" name="radio" value="Bungalo">Bungalow</td> </tr> <tr height="60px">
<td height="20px" />Area
<td style="text-align:left">
<select name="areaname" id="areaname" value="select" class="NotEmpty">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select code,areaname from areamaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['areaname']?>"><?php echo $row['areaname']?></option>
<?php
}
?>
</select>
</td>
<td></td>
<td>Flat</td>
<td style="text-align:left">
<select name="flat" id="flat" value="select">
<option value="SELECT" style="display:none">SELECT</option>
<?php
$query="select flat from flatmaster";
$query_run=mysql_query($query);
mysql_num_rows($query_run);
while($row=mysql_fetch_assoc($query_run))
{
?>
<option value="<?php echo $row['flat']?>"><?php echo $row['flat']?></option>
<?php
}
?>
</select>
</td>
</tr> <tr>
<td>
</td>
<td>
</td>
<td>
<input type="submit" name="empsubmit" style="width:75" id="submit" value="Search" class="button" onclick="showDiv()">
</td> </tr> </table> </form>
<?php if(isset($_SESSION['an'])) {
?>
<div class="heddendiv" width="30px">
<html><b>
Property Found for your search...</b>
<div Class="mainBlock4" style="width:100%">
<form name="leavesanction" action="" method="POST" onsubmit="notSELECT()" >
<table border=3px solid black;>
<tr>
<th width="15%" align="center">Area</th>
<th width="15%" align="center">Flat/Bungalo</th>
<th width="12%" align="center">BHK</th>
<th width="12%">Rent</th>
<th width="16%">Deposit</th>
<th width="10%">SQ Ft</th>
<th width="10%">FLoor</th>
<th width="10%">Lift</th>
</tr>
<?php
$select="select area,proptype,address,bhk,rent,diposit,sqft,floor,lift
from propertymaster where area='$an' and bhk='$flat' and rentorsale='$rentsale'";
$property=mysql_query($select);
while($row=mysql_fetch_assoc($property))
{
?>
<tr class="tr1">
<td class="td1">
<?php echo $row['area'];?>
</td>
<td align="center">
<?php echo $row['proptype'];?>
</td>
<td>
<?php echo $row['bhk'];?>
</td>
<td>
<?php echo $row['rent'];?>
</td>
<td>
<?php echo $row['diposit'];?>
</td>
<td>
<?php echo $row['sqft'];?>
</td>
<td>
<?php echo $row['floor'];?>
</td>
<td width="20px">
<?php echo $row['lift'];?>
</td>
</tr>
<?php
}
?>
</table>
<table class="closebutton">
<tr class="trclose" align="center">
<td></td>
<td width='260px'></td>
<td>
<a href="home.php?unsetsession=1">
<input type="submit" name="Close" style="width:75" id="Close" value="Close" class="button"></a>
</td>
</tr>
</table>
</form>
</div>
</html>
</div>
<?php } ?>
<?php if(!isset($_SESSION['an'])) { ?>
<div Class="mainBlock5" style="width:100%">
<p>testing div</p> </div>
<?php } ?>
</div>
<div class="col-sm-2 sidenav">
<div class="well">
<p>ADS</p> <img src="../riteshproject/login1.jpg" width="80" height="50">
</div>
<div class="well">
<p>ADS</p>
</div>
</div> </div> </div>
<footer class="container-fluid text-center">
<p><b><marquee>Designed,Developed and Maintened By Shree Shree
Property,Kolhapur Mob No 9373002173</b></marquee></p> </footer>
</body> </html>
<script> function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true; }
</script>
in javascript i done following with function
i get the values using getElementByName
and using if condition i checked it with "SELECT"
and shown alert();
i wrote that function in form tag onsubmit="notSELECT()"
so plz help me out to show alert msg
please help me

In this code:
function notSELECT() {
var inputControls = document.getElementsByClassName("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
You try to select all elements with the className of "areaname", but I can't seem to find any class with that name. Perhaps this is what you wanted:
function notSELECT() {
var inputControls = document.getElementById("areaname");
if (inputControls.value== "SELECT") {
alert("Enter Proper search Values");
return false;
}
return true;
}
EDIT:
For your second question (you stated in the comments) here is the code:
function notSELECT() {
var inputControlsAreaName = document.getElementById("areaname");
var inputControlsFlat = document.getElementById("flat");
if (inputControlsAreaName.value== "SELECT") {
alert("Please select areaname");
return false;
}
if (inputControlsFlat.value== "SELECT") {
alert("Please select flat");
return false;
}
return true;
}

Table Row Sliding Bug - MVC 5

I am currently implementing the answer to the question here:Can a table row expand and close? and everything currently works 100%!
However, as you can see in the picture there is a small gap between the rows, I want this gone for two reasons.
I simply would prefer there to be no gaps, I want the rows to all smoothly lay on top of each other until expanded.
If I click on that tiny gap it will close upwards, and then the normal open/close function no longer works for the row above it.
Any help appreciated!
I put an arrow by one of the gaps
Here is my entire View for that page (just for reference), BOTH the JS Script and the extra content (<td colspan="12">) can be found at the bottom of the page.
#model IEnumerable<WebApplication2.ViewModels.Starring.StarringViewModel>
#{
ViewBag.Title = "Index";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<style type="text/css">
table tr button {
opacity: 0.5;
float: right;
}
table tr:hover button {
opacity: 1;
}
</style>
<br />
<br />
<br />
<br />
<div class="panel panel-primary" style="width:100%">
<div class="panel-heading">
<span style="font-size: 30px; font-style:oblique"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-star"></span>Starring</span></span>
</div>
<div class="row">
<div class="col-xs-12">
<button type="button" style="margin:3px; width:32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Movie")';return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Movie</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class=" btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Employee")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Employee</span></button>
<button type="button" style="margin: 3px; width: 32.8%" class="btn btn-success col-lg-3 col-xs-3" onclick="location.href='#Url.Action("Create", "Show")' ;return false;"><span style="font-size:larger;"><span style="margin-right: 5px" class="glyphicon glyphicon-plus"></span>Add New Showing</span></button>
</div>
</div>
<table class="table table-striped table-hover table-responsive table-condensed">
<tr>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Movie Name</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Release Date</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">Actor</span></h3>
</th>
<th>
<h3 style="font-size:x-large"><span style="font-weight:bolder">#Html.DisplayNameFor(model => model.Role)</span></h3>
</th>
<th></th>
</tr>
#foreach (var item in Model)
{
<tr>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieName)</span>
</td>
<td class="col-lg-2">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.movieReleaseDate)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.employeeName)</span>
</td>
<td class="col-lg-1">
<span style="font-size: 17px;">#Html.DisplayFor(modelItem => item.Role)</span>
</td>
<td class="col-lg-3">
<button type="button" class="btn btn-warning col-lg-3" onclick="location.href='#Url.Action("Edit", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-pencil"></span>Edit</button>
<button type="button" class="btn btn-info col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Details", "Movie", new { id = item.movieID })';return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-align-justify"></span>Details</button>
<button type="button" class="btn btn-danger col-lg-3 col-lg-offset-1" onclick="location.href='#Url.Action("Delete", "Movie", new { id = item.movieID })' ;return false;"><span style="margin-right: 5px" class="glyphicon glyphicon-trash"></span>Delete</button>
</td>
</tr>
<tr>
<td colspan="12">
<p style="font-size: 17px; font-style: italic; font-family: 'Roboto', sans-serif">
MovieID: #Html.DisplayFor(modelItem => item.movieID)
<br />
Description: #Html.DisplayFor(modelItem => item.movieDescription)
</p>
</td>
</tr>
}
</table>
</div>
<script>
$(function () {
$("td[colspan=12]").find("p").hide();
$("table").click(function (event) {
event.stopPropagation();
var $target = $(event.target);
if ($target.closest("td").attr("colspan") == 12) {
$target.slideUp();
} else {
$target.closest("tr").next().find("p").slideToggle();
}
});
});
</script>

It looks like you're using Bootstrap. The default styles in Bootstrap applies a 5px padding to tds inside .table-condensed. You can override this with the following rule in your CSS...
.table>tbody>tr>td {
padding: 0px;
}
If you only want the padding removed when the p is collapsed, you can change the rule to include a nopadding class...
.table>tbody>tr>td.nopadding {
padding: 0px;
}
And use jQuery to attach the class to the td when you collapse the p...
$(function () {
$("td[colspan=12]").find("p").hide();
$("td[colspan=12]").addClass("nopadding");
$("tr").click(function () {
var $target = $(this);
var $detailsTd = $target.find("td[colspan=12]");
if ($detailsTd.length) {
$detailsTd.find("p").slideUp();
$detailsTd.addClass("nopadding");
} else {
$detailsTd = $target.next().find("td[colspan=12]");
$detailsTd.find("p").slideToggle();
$detailsTd.toggleClass("nopadding");
}
});
});
JSFiddle