Javascript 'onclick' 表问题

Question

我为这个标题道歉，我不知道该怎么调用它。无论如何，我目前正在使用所见即所得的网站构建器，但遇到了一个小问题。

我创建了以下代码来自动使“div”出现在所选单元格上方，以便将某些按钮包含在其中。当用户单击另一个单元格或用户单击文档的另一部分时，“div”需要消失。但我一直无法找到摆脱它的好方法，很高兴有一些帮助。谢谢，如果问的不是太多的话。我一直在尝试找出一种方法让文档自动检测从用户光标所在的位置选择了哪个表索引。这可以在第 1 行看到。

http://jsfiddle.net/fwZTc/102/

var table = document.getElementsByTagName("table")[0];
var cells = table.getElementsByTagName("td"); // 

for(var i = 0; i < cells.length; i++){
// Cell Object
var cell = cells[i];
// Track with onclick


cell.onclick = function(){
    var cellIndex  = this.cellIndex;  

    var rowIndex = this.parentNode.rowIndex;

    alert("cell: " + cellIndex + " / row: " + rowIndex );

//var div = document.createElement('div');
//div.innerHTML = "my <b>new</b> skill - <large>DOM maniuplation!</large>";
// set style
//div.style.color = 'red';
// better to use CSS though - just set class
//div.setAttribute('class', 'myclass'); // and make sure myclass has some styles in css
//document.appendChild(div);


awesome = table.rows[rowIndex].cells[cellIndex];
awesome.innerHTML = '<div style="width:200px; height:20px; position:absolute; margin-top:-20px; background-color:#666">'
}
}

Answer 1

试试这个。

HTML:

<table>
<tbody id="myTblBody">
    <tr>
        <td>1</td>
        <td>2</td> 
        <td>3</td>
    </tr>

    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>

    <tr>
        <td>7</td>
        <td>8</td>
        <td>9</td>
    </tr>
</tbody>

JQuery:

$('#myTblBody tr td').click(function(){
  var html = $(this).html();
  $('#box').remove();
  $(this).html(html + '<div id="box" style="width:50px; height:20px; position:absolute;             margin-top:-20px; background-color:#666">');
  //If you would like to know row and col number.
  var row = $(this).parent().index();
  var col = $(this).index();
  alert('row ==' + row + "col == "+ col);
});

JSFiddle