title: How do I send javascript parameters to DOM elements in from HTML table cells?
body: <p>I have the following project, where I am working on a chess opening 
  repertoire, in table form. </p>
  
  <p><a href="http://web.ics.purdue.edu/~mjschwei/chesstable/3/" rel="nofollow noreferrer">http://web.ics.purdue.edu/~mjschwei/chesstable/3/</a></p>
  
  <p>For each move, I would like a link that puts the board in the position that arises at that point in the variation, and comments 
  that I'd have for each move. Chessboard.js is easy to put into any position, it just needs a fen string</p>
  
  <p>How do I send the following information to the chessboard</p>
  
  <p>fen position, i.e. information like this "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR"
  and the comment information, text information associated with the move to the comment div, like this
  "This is the beginning of the Ruy Lopez, one of White's sharpest openings"</p>
  
  <p>In this example
  <a href="http://web.ics.purdue.edu/~mjschwei/chesstreed3/20/" rel="nofollow noreferrer">http://web.ics.purdue.edu/~mjschwei/chesstreed3/20/</a></p>
  
  <p>when I click on a node, I am able to pass comment information and fen (board position) information to the "comment" div and javascript chessboard respectively, because that info, for each node, and each move, is store in the JSON file, like this:</p>
  
  <pre><code>"name" : "Ruy Lopez",
     "children" : [
        {
           "name" : "e4",
            "move" : "1",
           "text" : "The Open Game",
           "fen" : "rnbqkbnr/pppppppp/8/8/4P3/8/PPPP1PPP/RNBQKBNR",
           "side" : "white",
           "nodecolor" : "GhostWhite",
           "textcolor" : "DarkSlateGrey",
           "variation" : "Open Game",
           "type" : "normal",
           "children" : [
              {
                 "name" : "e5",
                 "move" : "1",
                 "text" : "E4 is met with the symmetrical e5, indicating the liklihood of a sharp game",
                 "fen" : "rnbqkbnr/pppp1ppp/8/4p3/4P3/8/PPPP1PPP/RNBQKBNR",
                 "side" : "black",
                 "nodecolor" : "DarkSlateGrey",
                 "textcolor" : "white",
                 "variation" : "Open Game",
                 "type" : "normal",
                 "children" : [
                    {
  
               ------
  </code></pre>
  
  <p>and when I click on a node, this occurs</p>
  
  <pre><code>function click(d) {
    if (d.children) {
      d._children = d.children;
      d.children = null;
    } else {
      d.children = d._children;
      d._children = null;
      d3.select("#info").text(d.text);
      d3.select("#score1").text(d.name);
      board.position(d.fen)
    }
  </code></pre>
  
  <p>where board gets the fen information, and the info div gets the text information. D3.js makes it easy for  me, since the framework w/Json makes storing, and sending info, easy.  </p>
  
  <p>But, building this out in an HTML Table, I'm a little lost without d3.js and the Json file. I have only this for the link</p>
  
  <pre><code>&lt;td class="black" id="3a6-"&gt;&lt;a href="#"&gt;a6&lt;/a&gt;&lt;/td&gt;
  </code></pre>
  
  <p>And I don't know where to put the fen, text, comment, or other information, nor how to send it. Can anyone help?</p>
  
  <p>It's my first question, I've worked out a lot of d3.js on my own, and I don't want to aggravate anyone or get in trouble, but I didn't know how else to ask. </p>