HTML - Make a td clickable and pass value onsubmit

Question

I have the below working example:

http://jsfiddle.net/Jaron787/tw3x9xt7/2/

I want to make each TDclickable (either highlight on put border around it) and onclick of button 1 or 2 to pass the id of the TD which was clicked.

What is the best way to do this? - Please update working example

HTML

<div id="lse" class="display">
  <div id="centertbl">
    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 1</b></td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 1</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 2</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 3</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 4</td>
      </tr>
    </table>

    <table id="tblData" class="TSS">
      <tr>
        <td align="center" colspan="4"><b>Table 2</b></td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 1</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 2</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 3</td>
      </tr>
      <tr>
        <td align="center" colspan="4">Data 4</td>
      </tr>
    </table>
  </div>

  <input type="submit" class="button button1" name="submitButton" value="Button 1">
  <input type="submit" class="button button1" name="submitButton" value="Button 2">
</div>

CSS

.TSS {
  border: 1px solid #000000;
  float: none;
  font-family: Verdana, Geneva, sans-serif;
  font-size: 10.6px;
  font-style: normal;
  padding: 10px;
  text-decoration: none;
  display: inline-block;
}

#centertbl {
  text-align: center;
}

.button {
  background-color: #4CAF50;
  /* Green */
  border: none;
  color: white;
  padding: 5px 15px;
  text-align: center;
  text-decoration: none;
  display: block;
  font-size: 16px;
  margin: 4px 2px;
  -webkit-transition-duration: 0.4s;
  /* Safari */
  transition-duration: 0.4s;
  cursor: pointer;
}

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background-color: #4CAF50;
  color: white;
}

Wait... Do you want us to code? Have you done something yet? — Praveen Kumar Purushothaman, May 05 '16 at 08:53
http://stackoverflow.com/questions/6012823/how-to-make-html-table-cell-editable — akhil viswam, May 05 '16 at 09:04
Personally I would use styled checkboxes and a form for this. Failing that, you will need to learn javascript and as it seems you have limited knowledge of html, you are probably best learning jQuery as it is easier than native js — Pete, May 05 '16 at 10:05

score 2 · Accepted Answer · answered May 05 '16 at 09:36

Give id to every td:

<table id="tblData" class="TSS">
  <thead>
    <tr>
      <td align="center" colspan="4" id="td1"><b>Table 1</b></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" colspan="4" id="td2">Data 1</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td3">Data 2</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td4">Data 3</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td5">Data 4</td>
    </tr>
  </tbody>
</table>

<table id="tblData" class="TSS">
  <thead>
    <tr>
      <td align="center" colspan="4" id="td6"><b>Table 2</b></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td align="center" colspan="4" id="td7">Data 1</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td8">Data 2</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td9">Data 3</td>
    </tr>
    <tr>
      <td align="center" colspan="4" id="td10">Data 4</td>
    </tr>
  </tbody>
</table>

And CSS to highlight the td when you click them:

.td-hover {
    background-color: #4CAF50;
}

Assume you use jQuery, here is the javascript:

//onlick of a td will highlight the td clicked, if it's already been   highlighted the onclick event will remove the highlight.
$("td").click(function() {   
    if ($(this).hasClass("td-hover")) {
        $(this).removeClass("td-hover");
    } else {
        $(this).addClass("td-hover");
    }
})

//click on the button 1 or 2 will capture all id of the td that is highlighted
$(".button").click(function() {
    $("td").each(function() {
        if ($(this).hasClass("td-hover")) {
        var id = $(this).attr("id");
        alert(id);  // replace your function here
        }
    })
})

This is really great, however take a look at: http://jsfiddle.net/Jaron787/4tzun8vy/ Is there a way to stop the user from being able to click on the radio button td (highlighting it green) or the table header td ? — Jaron787, May 06 '16 at 08:10

UnLi · Answer 2 · 2016-05-05T18:45:38.737

Check out this maybe it helps jsfiddle

 $('td').on('click',function(){
    $(this).addClass('clicked');
  console.log('hi!');
});

   $('td').on('click',function(){
    $(this).addClass('clicked');
  console.log('hi!');
});

    $('.button.button1').on('click',function(){
         $( "td.clicked" ).each(function() {
          console.log($(this).attr('id'));
          var a = $(this).attr('id');
          $('.info').append(' Element id is: ' + a);
      });
    });

score 0 · Answer 3 · answered May 05 '16 at 09:26

Do you want to have only one selectable TD, or multiple ones? You need to use JavaScript in either way, this is not something that can be done using just CSS and HTML.

Either way I would use jQuery and add a '.selected' class on td click, and then on button click, just fetch those td ID's that have '.selected' class on them.

$('td').on('click', function(){
    $('td').removeClass('selected');   //remove '.selected' class from all td elements
    $(this).addClass('selected');     //add '.selected' class on just the clicked one
});

$('.button').on('click', function(){
    var selectedId = $('td.selected').attr('id');    //fetch id of the id that has '.selected' class
    alert(selectedId);
});

JSFIDDLE

HTML - Make a td clickable and pass value onsubmit

3 Answers3