0
Я использую следующий фрагмент кода для вызова тега div, но он не вызывался, пожалуйста, помогите мне решить эту проблему.Событие Click не было вызвано для тега div
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
<div class="ganttgridtreecontainer" onclick="click();" style="width: 100%; height: 34000px; position: absolute;"><table class="table" style="position: absolute;"><colgroup></colgroup><tbody><tr><td class="rowcell"><div><div class="intend" style="width: 0px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 1</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">84</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 2</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">91</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 3</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">1</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 4</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">56</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 5</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">38</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 6</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">65</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 7</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">42</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 8</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">1</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 9</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">53</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 10</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">38</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 11</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">17</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 12</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">50</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 13</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">66</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 14</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">74</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 15</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">34</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 16</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">95</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 17</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">30</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 0px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 18</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">31</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 19</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">50</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 20</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">59</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 21</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">23</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 22</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">95</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 23</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">46</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 24</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">21</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 25</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">93</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 26</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">25</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 27</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">30</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 28</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">3</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 29</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">19</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 30</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">9</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 31</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">49</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 32</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">95</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 33</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">86</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 34</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">36</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 0px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 35</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">97</td></tr><tr class="alt_row"><td class="rowcell"><div><div class="intend" style="width: 12px; height: 1px; float: left;"></div><div class="expand" style="float: left;"></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 36</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">41</td></tr><tr><td class="rowcell"><div><div class="intend" style="width: 24px; height: 1px; float: left;"></div><div class="style='float:" left'=""></div><div style="width: 10px; height: 1px; float: left;"></div><div>Task 37</div></div></td><td class="rowcell">01/01/2013</td><td class="rowcell">01/05/2013</td><td class="rowcell">5 days</td><td class="rowcell">84</td></tr></tbody></table></div>
<script type="text/javascript">
function click(){
var rows= $(".table").rows;
var $target=e.target;
var row = $target.closest('tr');
var index = $ganttGridRows.index(row);
row.find('.rowcell').addClass("selectionbackground");
}
</script>
<style type="text/css">
.expand {
width: 0;
height: 0;
border-bottom: 10px solid black;
border-left: 10px solid transparent;
}
.collapse {
width: 0;
height: 0;
border-top: 5px solid transparent;
border-left: 10px solid black;
border-bottom: 5px solid transparent;
}
/*-----------------------OLAP Definition-----------------*/
/*Theme Color*/
.ganttgridtreecontent .table > tbody > tr:first-child td.editCell .table {
border-top-width: 0;
border-top-style: none;
}
table th:first-child .headercell-hover {
border-width: 1px 0 1px 0;
}
.table {
width: 100%;
table-layout: fixed;
border: 0 none;
*border-collapse: separate;
}
.hide {
display: none !important;
}
.ganttgridtreecontent {
overflow: hidden;
outline: none;
}
.headercell,
.headercell-hover {
border-collapse: collapse;
height: 40px;
padding: 0 0.5em;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
text-align: left;
}
.headercelldiv {
font-weight: bold;
font-size: 14px;
display: block;
border: 0 none;
height: 29px;
line-height: 29px;
overflow: hidden;
margin: -7px;
padding: 0px 25px 0px 7px;
text-align: left;
white-space: nowrap;
}
.rowcell
{
border-collapse: collapse;
border-style: solid;
border-width: 0 0 1px 1px;
display: table-cell;
overflow: hidden;
padding: 0.7em;
line-height: 20px;
white-space: nowrap;
width: auto;
vertical-align: middle;
}
.e-ganttgridtree-core .boolrowcell {
padding-bottom: 0px;
padding-top: 0px;
padding-left: 0px;
}
.e-ganttgridtree-core .columnheader {
cursor: pointer;
}
.e-ganttgridtree-core .spacing {
padding: 3px 9px;
*float: left;
}
.e-ganttgridtree-core .ganttgridtreeheader {
overflow-x: hidden;
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0 0;
}
/*..........................Skin css...........................*/
.e-ganttgridtree-core.e-rtl {
direction: rtl;
}
.e-ganttgridtree-core.e-rtl .rowcell,
.e-ganttgridtree-core.e-rtl .emptycell {
border-width: 0 1px 1px 0;
}
.e-ganttgridtree.e-rtl tr td:first-child,
.e-ganttgridtree.e-rtl tr th:first-child {
border-right: 0 none;
}
.e-ganttgridtree {
border-color: #c4c4c4;
color: #6d6d6d;
border-top: none;
}
.ganttgridtreecontent {
background-color: white;
}
.e-ganttgridtree .headercell-hover,
.e-ganttgridtree .groupheadercell:hover {
color: white;
}
.e-ganttgridtree .rowcell,
.e-ganttgridtree .emptycell {
border-color: #c4c4c4;
}
/*.e-ganttgridtree .alt_row {
background: #f6f7f7;
}*/
.selectionbackground {
background-color: #2382c3;
color: white;
}
.e-ganttgridtree .headercell{
background: white;
border-width: 0 0 0 1px;
border-style: solid;
border-top-color: #c4c4c4;
border-left-color: #c4c4c4;
border-bottom-color: #169dd8;
}
.e-ganttgridtree .ganttgridtreeheader {
color: #5c5c5c;
border-bottom: 3px solid #169dd8;
border-top: 1px solid #c4c4c4;
}
.e-ganttgridtree .ganttgridtreecontent {
border-right: 1px solid #c4c4c4;
overflow: hidden;
}
.e-ganttgridtree.e-rtl .ganttgridtreecontent {
border-left: 1px solid #c4c4c4;
border-right-width: 0px;
overflow: hidden;
}
.e-ganttgridtree .currentitem,
.e-ganttgridtree .currentitem:hover {
background: #2382c3;
/* Old browsers */
color: white;
padding: 3px 9px;
}
.e-ganttgridtree .toolbaritems {
color: #5c5c5c;
}
.e-ganttgridtree-core .e-toolbar-horizontal.toolcover,
.e-ganttgridtree-core .e-toolbar-vertical.toolcover {
border-width: 1px 0 0;
display: block !important;
border-color: #c4c4c4;
}
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .addnewitem,
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .searchitem,
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .edititem,
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .deleteitem,
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .saveitem,
.e-ganttgridtree-core .e-toolbar-horizontal .toolhover .cancel {
background-image: url(../common-images/icons-white.png) !important;
}
.e-ganttgridtree .e-dialog .rowcell {
border: none;
padding: 0.1em;
}
.e-ganttgridtree .editformcaptioncell {
color: #231f20;
}
.e-ganttgridtree span.field-validation-error {
color: #cd0a0a;
display: inline-table;
}
.e-ganttgridtree .editcell {
border-color: #c4c4c4;
}
.ejinputtext {
border: 1px solid #bbbcbb;
background-color: white;
color: #5c5c5c;
outline: none;
}
.ejinputtext:focus {
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
}
.e-ganttgridtree .recordplusexpand > div,
.e-ganttgridtree .detailrowexpand > div,
-Tooltip.e-ganttgridtree .tooltipbottomdiv {
background-image: url(../common-images/icons-gray.png);
}
.lastpage:Hover {
border-radius: 0px 4px 4px 0px;
}
.firstpage:Hover {
border-radius: 4px 0px 0px 4px;
}
.e-ganttgridtree .filterbarcell,
.e-ganttgridtree .filterbarcelldisabled {
border-color: #c4c4c4;
background-color: white;
background-image: none;
height: 40px;
}
.e-ganttgridtree .filterbarcell input {
border-color: #939292;
color: #6d6d6d;
}
.e-ganttgridtree .e-ganttgridtree-filterstatusbar,
.e-ganttgridtree .e-ganttgridtree-filterstatusbarbottom {
background: #2382c3;
/* Old browsers */
border-color: #c4c4c4;
}
.e-ganttgridtree tr td:first-child,
.e-ganttgridtree tr th:first-child {
border-left: 0px;
}
.e-ganttgridtree .e-ganttgridtree-filterstatusbar .msgdiv,
.e-ganttgridtree .e-ganttgridtree-filterstatusbarbottom .msgdiv {
color: white;
}
.e-ganttgridtree .columnheader .headercellactive {
background: #2382c3;
/* Old browsers */
color: white;
}
.e-ganttgridtree .columnheader .headercell.headercellactive span {
background: #2382c3;
/* Old browsers */
}
.e-ganttgridtree .groupdropareahover {
background: #5eabde;
/* Old browsers */
}
.e-ganttgridtree .enablerowhover {
background-color: #5eabde;
color: white;
}
.e-ganttgridtree .scrollcss {
padding-right: 18px;
background: white;
/* Old browsers */
}
.e-ganttgridtree-core.e-rtl .scrollcss {
padding-right: 0px;
padding-left: 18px;
}
.e-ganttgridtree-core .headercellfilter {
padding-right: 35px;
}
.e-ganttgridtree .headercell-hover,
.e-ganttgridtree .filtercell:hover,
.e-ganttgridtree .groupheadercell:hover {
background: #5eabde;
/* Old browsers */
}
</style>
</body>
</html>
Я хочу изменить className в td выбранной строки через щелчок мыши. Мое точное требование подчеркивает выбранный элемент посредством взаимодействия с мышью. Заранее спасибо.
Boy, где вы включили библиотеку JQuery? –