Question

我使用以下代码段来调用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。我的确切要求是通过鼠标互动突出显示选择项。提前谢谢。

Answer 1

$(".table").on("click", "td", function(e) {
  e.preventDefault();
    $(this).css("background-color", "red").addClass("highlighted");
});

参见 demo

Answer 2

function click(e){
            var rows= $(".table").rows;
            var $target=e.target;
            var row = $target.closest('tr');
            var index = $ganttGridRows.index(row);                        
            row.find('.rowcell').addClass("selectionbackground");    
        }

试试这个

没有为div标签调用Click事件

2 个答案: