Javascript 'onclick' table issue

Question

I do apologize for the title, I wasn't sure what to call this. Anyways I am currently working on a WYSIWYG site builder and I've run into a little problem.

I created the following code to automatically make a 'div' appear above the selected cell for some buttons to be contained within it. The 'div' needs to disappear when a user clicks on another cell or when the user clicks on another bit of the document, etc. But I've been unable to figure out a good method of getting rid of it, would be lovely to have some help. Thank you, and also if it isn't too much to ask. I've been attempting to figure out a way for the document to automatically detect what table index is selected from where the user has their cursor. That can be seen on line 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">'
}
}

will you use jquery in your project ?

aelor
– aelor

2014-02-03 05:10:21 +00:00
Commented Feb 3, 2014 at 5:10 — aelor
– aelor, Commented Feb 3, 2014 at 5:10
I use it, but I try to avoid it as much as possible.

user2994429
– user2994429

2014-02-03 05:56:18 +00:00
Commented Feb 3, 2014 at 5:56 — user2994429
– user2994429, Commented Feb 3, 2014 at 5:56
Better start using it. It makes life easier.

aelor
– aelor

2014-02-03 06:19:38 +00:00
Commented Feb 3, 2014 at 6:19 — aelor
– aelor, Commented Feb 3, 2014 at 6:19
I'm more old school, haha.

user2994429
– user2994429

2014-02-03 06:35:10 +00:00
Commented Feb 3, 2014 at 6:35 — user2994429
– user2994429, Commented Feb 3, 2014 at 6:35

Navin · Accepted Answer · 2014-02-03 05:30:02Z

1

Try this instead.

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

answered Feb 3, 2014 at 5:30

Navin

6144 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

user2994429 Over a year ago

This works great, but it is lacking a big feature. I need it to detect what table I have selected, because I have no idea how many tables my users will actually use, and this will only work if there was a single named table. Would there be a way for it to detect what table was selected?

user2994429 Over a year ago

My mistake, this is what I get for staying up all night. Thank you, you got it 100% correct.

Navin Over a year ago

Yes, you can add class instead. Please check this JsFiddle. is this what you look for ?

user2994429 Over a year ago

Would there be a way to make it so that the 'box' would always be in the top right hand side of the table, I've noticed that the div always being on top of the cell is an issue with trying to switch to other cells as well as not always ending on the top if content is involved.

Navin Over a year ago

you can add some css accordingly. check this JSFiddle

|

Collectives™ on Stack Overflow

Javascript 'onclick' table issue

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related