该链接提供了整行。这样当点击复选框时&明星,它带我到链接页面,但它不应该带我到链接页面,我搜索&我没有得到结果。由于我是新手,我无法挺身而出。有没有办法阻止行中特定td的链接?如果是的话,你能解释一下吗?
$(".star-ttip").tooltip({
title: 'Star'
});
$(".inquiries #check-all").click(function() {
if ($("#check-all").is(':checked')) {
$(".inquiries input[type=checkbox]").each(function() {
$(this).prop("checked", true);
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').addClass("clr-blk");
});
} else {
$(".inquiries input[type=checkbox]").each(function() {
$(this).prop("checked", false);
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
});
}
});
$(".inquiries>tbody>tr>td>input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).closest('tr').removeClass(".table-hover");
$(this).parents().find('.mini').addClass("clr-blk");
} else {
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
}
});
.table-inbox {
border: 1px solid #d3d3d3;
margin-bottom: 0;
}
.table-inbox tr td {
padding: 11px !important;
}
.table-inbox tr td:hover {
cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
color: #ffcc29;
}
.table-inbox tr td .fa-star {
color: #d5d5d5;
}
.mail-option {
width: 100%;
text-align: right;
border: 1px solid #ccc;
border-bottom: none;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 0px !important;
color: #afafaf;
display: inline-block;
padding: 12px 10px;
}
.mail-option .chk-all input[type="checkbox"] {
margin-top: 0;
}
.mail-option .btn-group a.all {
border: medium none;
padding: 0;
}
.heading-inbox h4 {
border-bottom: 1px solid #ddd;
color: #444;
font-size: 18px;
margin-top: 20px;
padding-bottom: 10px;
}
.mail-option>div:first-child {
padding: 14px 0px 0px 10px;
}
thead {
color: #ccc;
}
.inquiries {
border-collapse: initial !important;
}
.inquiries>thead>tr>th {
border-bottom: none;
padding: 4px 8px;
font-weight: normal;
}
.inquiries tbody tr td:last-child {
width: 11%;
}
.inquiries tbody tr td:nth-child(3) {
width: 25%;
/*padding-left: 0px !important;*/
}
.inquiries tbody tr td:nth-child(2) {
padding-right: 0px !important;
}
.sender-img {
border-radius: 50%;
margin-right: 6px;
/*vertical-align: top;*/
}
.inquire-progress {
margin: 5px 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
width: 190px;
}
.inquiries>thead>tr>th>input {
margin-left: 3px;
}
.clr-blk {
color: #000 !important;
}
.inquire-noti {
border-radius: 50%;
font-size: 12px;
}
.mail-option>div>a {}
.tabbable-panel {}
.tabbable-line {
padding-bottom: 18px;
}
.tabbable-line>.nav-tabs {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.tabbable-line>.nav-tabs>li {
margin-right: 2px;
}
.tabbable-line>.nav-tabs>li:last-child:before {
content: "";
position: absolute;
left: -9px;
bottom: -11px;
border-bottom: 9px solid #fff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.tabbable-line>.nav-tabs>li.pointer {
position: absolute;
width: 0;
height: 0;
left: 44px;
bottom: 19px;
margin: 0;
border-bottom: 10px solid #dddddd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.tabbable-line>.nav-tabs>li>a {
border: 0;
margin-right: 0;
color: #737373;
font-size: 17px;
}
.tabbable-line>.nav>li>a:hover {
background-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-inbox table-hover inquiries table-responsive">
<thead>
<tr>
<th colspan="">
<input type="checkbox" id="check-all">
</th>
<th style="visibility: hidden;"></th>
<!-- <th><span class="btn-group">
<button type="button" class="dropdown-toggle select-all-drpdwn-icon" data-toggle="dropdown" id="select-all">
<span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu select-all-drpdwn" role="menu">
<li><a href="#">All</a></li>
<li><a href="#">None</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Unread</a></li>
<li><a href="#">Starred</a></li>
<li><a href="#">Unstarred</a></li>
</ul>
</span></th> -->
<th>SENDER</th>
<th>SUBJECT</th>
<th>COUNTRY</th>
<th>UPDATED</th>
</tr>
</thead>
<tbody>
<tr class="unread" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
</tbody>
</table>
答案 0 :(得分:1)
我将您的代码更改为有效。
我将clickAction类添加到了您想要拥有该事件的行。
$("tr.clickAction> td:not(:nth-child(1), :nth-child(2))").on("click",function(){
document.location = 'http://www.google.com';
});
$(".star-ttip").tooltip({
title: 'Star'
});
$(".inquiries #check-all").click(function() {
if ($("#check-all").is(':checked')) {
$(".inquiries input[type=checkbox]").each(function() {
$(this).prop("checked", true);
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').addClass("clr-blk");
});
} else {
$(".inquiries input[type=checkbox]").each(function() {
$(this).prop("checked", false);
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
});
}
});
$(".inquiries>tbody>tr>td>input[type='checkbox']").change(function() {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).closest('tr').removeClass(".table-hover");
$(this).parents().find('.mini').addClass("clr-blk");
} else {
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
}
});
除了前两个TD之外,这将适用于使用clickAction类在TR内的每个TD上。
.table-inbox {
border: 1px solid #d3d3d3;
margin-bottom: 0;
}
.table-inbox tr td {
padding: 11px !important;
}
.table-inbox tr td:hover {
cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
color: #ffcc29;
}
.table-inbox tr td .fa-star {
color: #d5d5d5;
}
.mail-option {
width: 100%;
text-align: right;
border: 1px solid #ccc;
border-bottom: none;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 0px !important;
color: #afafaf;
display: inline-block;
padding: 12px 10px;
}
.mail-option .chk-all input[type="checkbox"] {
margin-top: 0;
}
.mail-option .btn-group a.all {
border: medium none;
padding: 0;
}
.heading-inbox h4 {
border-bottom: 1px solid #ddd;
color: #444;
font-size: 18px;
margin-top: 20px;
padding-bottom: 10px;
}
.mail-option>div:first-child {
padding: 14px 0px 0px 10px;
}
thead {
color: #ccc;
}
.inquiries {
border-collapse: initial !important;
}
.inquiries>thead>tr>th {
border-bottom: none;
padding: 4px 8px;
font-weight: normal;
}
.inquiries tbody tr td:last-child {
width: 11%;
}
.inquiries tbody tr td:nth-child(3) {
width: 25%;
/*padding-left: 0px !important;*/
}
.inquiries tbody tr td:nth-child(2) {
padding-right: 0px !important;
}
.sender-img {
border-radius: 50%;
margin-right: 6px;
/*vertical-align: top;*/
}
.inquire-progress {
margin: 5px 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
width: 190px;
}
.inquiries>thead>tr>th>input {
margin-left: 3px;
}
.clr-blk {
color: #000 !important;
}
.inquire-noti {
border-radius: 50%;
font-size: 12px;
}
.mail-option>div>a {}
.tabbable-panel {}
.tabbable-line {
padding-bottom: 18px;
}
.tabbable-line>.nav-tabs {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.tabbable-line>.nav-tabs>li {
margin-right: 2px;
}
.tabbable-line>.nav-tabs>li:last-child:before {
content: "";
position: absolute;
left: -9px;
bottom: -11px;
border-bottom: 9px solid #fff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.tabbable-line>.nav-tabs>li.pointer {
position: absolute;
width: 0;
height: 0;
left: 44px;
bottom: 19px;
margin: 0;
border-bottom: 10px solid #dddddd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.tabbable-line>.nav-tabs>li>a {
border: 0;
margin-right: 0;
color: #737373;
font-size: 17px;
}
.tabbable-line>.nav>li>a:hover {
background-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-inbox table-hover inquiries table-responsive">
<thead>
<tr>
<th colspan="">
<input type="checkbox" id="check-all">
</th>
<th style="visibility: hidden;"></th>
<!-- <th><span class="btn-group">
<button type="button" class="dropdown-toggle select-all-drpdwn-icon" data-toggle="dropdown" id="select-all">
<span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu select-all-drpdwn" role="menu">
<li><a href="#">All</a></li>
<li><a href="#">None</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Unread</a></li>
<li><a href="#">Starred</a></li>
<li><a href="#">Unstarred</a></li>
</ul>
</span></th> -->
<th>SENDER</th>
<th>SUBJECT</th>
<th>COUNTRY</th>
<th>UPDATED</th>
</tr>
</thead>
<tbody>
<tr class="unread clickAction">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 "></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread clickAction">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 "></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="clickAction">
<td class="inbox-small-cells ">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 "></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="clickAction">
<td class="inbox-small-cells ">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 "></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="clickAction">
<td class="inbox-small-cells ">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started "></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Santhosh naarayanan</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Ilaya raja </td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Anirudh</td>
<td class="view-message">Thaara thappatai Awsome sir.. </td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Aadhi</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25" class="sender-img">Pugal </td>
<td class="view-message">I'm about sing guys... :) </td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
</tbody>
</table>
export const withCreateLink = graphql(createLink, {
props({ownProps, mutate}) {
return {
createLink(url, description, group) {
return mutate({
variables: {
url,
description,
group
},
updateQueries: {
getAllGroups: (prev, {mutationResult}) => {
const newLink = mutationResult.data.createLink;
return update(prev, {
allGroups: {
links: {
$push: [newLink]
}
}
})
}
}
})
}
}
}
});
答案 1 :(得分:0)
试试这段代码 How to prevent row click function on specific column in datatable?或者您可以查看此链接 Disable on-click event for single column 您可以阻止特定列执行onclick函数,但您必须将该列索引提供给您的javascript函数或通过css类 为您的代码
table td:nth-child(2) {
pointer-events: none;
}
table td:nth-child(1) {
pointer-events: none;
}
将其添加到样式表
答案 2 :(得分:0)
因为你有一个带有重定向动作的内联onClick事件处理程序,你可以只选择那些行,并在单击内部单元格时停止传播到该行。
要添加的代码:
$('table.table tbody tr[onClick] td').on('click', function (e) {
e.stopPropagation();
});
选择器'.table tbody tr [onClick] td'表示:选择一个具有类表的表,因此获取tbody元素,并且对于每个包含的行,只选择具有属性onClick的行。对于每一行,只获取相关的td元素。
e.stopPropagation():阻止事件冒泡DOM树,防止任何父处理程序被通知事件。 (即:停止将事件传播到相应的行,因此不会执行内联onClick)
//
// ADD THIS LINE
//
$('table.table tbody tr[onClick] td').on('click', function (e) {
e.stopPropagation();
console.log('Stopped propagation for: ' + this.tagName);
});
$(".star-ttip").tooltip({
title: 'Star'
});
$(".inquiries #check-all").click(function () {
if ($("#check-all").is(':checked')) {
$(".inquiries input[type=checkbox]").each(function () {
$(this).prop("checked", true);
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').addClass("clr-blk");
});
} else {
$(".inquiries input[type=checkbox]").each(function () {
$(this).prop("checked", false);
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
});
}
});
$(".inquiries>tbody>tr>td>input[type='checkbox']").change(function () {
if ($(this).is(":checked")) {
$(this).closest('tr').addClass("inq-checked-clr clr-blk");
$(this).closest('tr').removeClass(".table-hover");
$(this).parents().find('.mini').addClass("clr-blk");
} else {
$(this).closest('tr').removeClass("inq-checked-clr clr-blk");
$(this).parents().find('.mini').removeClass("clr-blk");
}
});
.table-inbox {
border: 1px solid #d3d3d3;
margin-bottom: 0;
}
.table-inbox tr td {
padding: 11px !important;
}
.table-inbox tr td:hover {
cursor: pointer;
}
.table-inbox tr td .fa-star.inbox-started, .table-inbox tr td .fa-star:hover {
color: #ffcc29;
}
.table-inbox tr td .fa-star {
color: #d5d5d5;
}
.mail-option {
width: 100%;
text-align: right;
border: 1px solid #ccc;
border-bottom: none;
}
.mail-option .chk-all, .mail-option .btn-group a.btn {
background: none repeat scroll 0 0 #fcfcfc;
border: 1px solid #e7e7e7;
border-radius: 0px !important;
color: #afafaf;
display: inline-block;
padding: 12px 10px;
}
.mail-option .chk-all input[type="checkbox"] {
margin-top: 0;
}
.mail-option .btn-group a.all {
border: medium none;
padding: 0;
}
.heading-inbox h4 {
border-bottom: 1px solid #ddd;
color: #444;
font-size: 18px;
margin-top: 20px;
padding-bottom: 10px;
}
.mail-option > div:first-child {
padding: 14px 0px 0px 10px;
}
thead {
color: #ccc;
}
.inquiries {
border-collapse: initial !important;
}
.inquiries > thead > tr > th {
border-bottom: none;
padding: 4px 8px;
font-weight: normal;
}
.inquiries tbody tr td:last-child {
width: 11%;
}
.inquiries tbody tr td:nth-child(3) {
width: 25%;
/*padding-left: 0px !important;*/
}
.inquiries tbody tr td:nth-child(2) {
padding-right: 0px !important;
}
.sender-img {
border-radius: 50%;
margin-right: 6px;
/*vertical-align: top;*/
}
.inquire-progress {
margin: 5px 5px 10px;
background-color: #fff;
border: 1px solid #ccc;
width: 190px;
}
.inquiries > thead > tr > th > input {
margin-left: 3px;
}
.clr-blk {
color: #000 !important;
}
.inquire-noti {
border-radius: 50%;
font-size: 12px;
}
.mail-option > div > a {
}
.tabbable-panel {
}
.tabbable-line {
padding-bottom: 18px;
}
.tabbable-line > .nav-tabs {
border-bottom: 1px solid #ccc;
margin: 0px;
}
.tabbable-line > .nav-tabs > li {
margin-right: 2px;
}
.tabbable-line > .nav-tabs > li:last-child:before {
content: "";
position: absolute;
left: -9px;
bottom: -11px;
border-bottom: 9px solid #fff;
border-right: 9px solid transparent;
border-left: 9px solid transparent;
}
.tabbable-line > .nav-tabs > li.pointer {
position: absolute;
width: 0;
height: 0;
left: 44px;
bottom: 19px;
margin: 0;
border-bottom: 10px solid #dddddd;
border-right: 10px solid transparent;
border-left: 10px solid transparent;
}
.tabbable-line > .nav-tabs > li > a {
border: 0;
margin-right: 0;
color: #737373;
font-size: 17px;
}
.tabbable-line > .nav > li > a:hover {
background-color: transparent;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<table class="table table-inbox table-hover inquiries table-responsive">
<thead>
<tr>
<th colspan="">
<input type="checkbox" id="check-all">
</th>
<th style="visibility: hidden;"></th>
<!-- <th><span class="btn-group">
<button type="button" class="dropdown-toggle select-all-drpdwn-icon" data-toggle="dropdown" id="select-all">
<span class="caret"></span><span class="sr-only">Toggle Dropdown</span>
</button>
<ul class="dropdown-menu select-all-drpdwn" role="menu">
<li><a href="#">All</a></li>
<li><a href="#">None</a></li>
<li><a href="#">Read</a></li>
<li><a href="#">Unread</a></li>
<li><a href="#">Starred</a></li>
<li><a href="#">Unstarred</a></li>
</ul>
</span></th> -->
<th>SENDER</th>
<th>SUBJECT</th>
<th>COUNTRY</th>
<th>UPDATED</th>
</tr>
</thead>
<tbody>
<tr class="unread" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Santhosh naarayanan
</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Ilaya raja
</td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Anirudh
</td>
<td class="view-message">Thaara thappatai Awsome sir..</td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="" onclick="document.location = 'http://www.google.com';">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Aadhi
</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Santhosh naarayanan
</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Ilaya raja
</td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Anirudh
</td>
<td class="view-message">Thaara thappatai Awsome sir..</td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Aadhi
</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Aadhi
</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Santhosh naarayanan
</td>
<td class="view-message ">Hello sir...</td>
<td class="view-message dont-show">India</td>
<td class="view-message">9:27 AM</td>
</tr>
<tr class="unread">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Ilaya raja
</td>
<td class="view-message">Hi...santhosh, Wasup?</td>
<td class="view-message inbox-small-cells">UK</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Anirudh
</td>
<td class="view-message">Thaara thappatai Awsome sir..</td>
<td class="view-message inbox-small-cells">Canada</td>
<td class="view-message">Mar 15, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Aadhi
</td>
<td class="view-message">Yes, it was nice</td>
<td class="view-message inbox-small-cells">
China
</td>
<td class="view-message">Apr 01, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
<tr class="">
<td class="inbox-small-cells">
<input type="checkbox" class="mail-checkbox">
</td>
<td class=""><i class="fa fa-star star-ttip fnt-size-18 inbox-started"></i></td>
<td class="view-message dont-show"><img
src="https://cdn.paperindex.com/piimages/left-column/prompt-customer-service.jpg" width="25" height="25"
class="sender-img">Pugal
</td>
<td class="view-message">I'm about sing guys... :)</td>
<td class="view-message inbox-small-cells">US</td>
<td class="view-message">May 23, 16</td>
</tr>
</tbody>
</table>