Question

我使用JavaScript构建了一个表。但是，当我尝试在该表上调用jQuery时，它不起作用。我试图让jQuery突出显示表的列，当我胡佛与它。这是我的代码

＆＃13;

var tableRef = document.getElementById('myTable').getElementsByTagName('tbody')[0];

// Insert a row in the table at row index 0
var newRow = tableRef.insertRow(tableRef.rows.length);

// Insert a cell in the row at index 0
var newCell = newRow.insertCell(0);

// Append a text node to the cell
var newText = document.createTextNode('New row')

// Append a text node to the cell
newCell.appendChild(newText);



//Apend new cell to same row
var newCell = newRow.insertCell(1);
var newText = document.createTextNode('Nea')
newCell.appendChild(newText);


//highlight column 
$('td').on('mouseenter', function() {
  var i = $(this).parent().children().index(this);
  $('col').removeClass('hovered');
  $('col:nth-child(' + (i + 1) + ')').addClass('hovered');
});

$('td').on('mouseleave', function() {
  $('col').removeClass('hovered');
});

＆＃13;

table {
  border-collapse: collapse;
}
table tr:hover {
  background-color: grey;
}
col.hovered {
  background-color: grey;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<table id="myTable">
  <thead>
    <tr>
      <th>My Header</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>aaaaa</td>
      <td>aaaaa</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>My footer</td>
    </tr>
  </tfoot>
</table>

＆＃13;

这是JsFiddle http://jsfiddle.net/4sR2G/764/

Answer 1

我设法使用

获得效果

<colgroup>
    <col></col>
    <col></col>
    <col></col>
</colgroup>

从你提供的一个例子中。

在javascript构建的表上使用jquery

1 个答案: