HTML - TDのクリッカブルを作成し、私は以下の実施例を持って

Question

ONSUBMIT値を渡す：

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

私は各TDclickableを作りたい

（その周りに置く境界線を上のハイライトのいずれか）と、ボタン1のonclickのか2クリックしたTDのIDを渡す。

これを行うにはどのような方法が最適ですか？ - これをチェックしてください

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; 
} 

Answer 1

すべてのTDにIDを付与します。

<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> 

とCSSをあなたがそれらをクリックしたときにTDを強調するために：

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

あなたはjQueryのを使用すると仮定し、ここにあります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 
     } 
    }) 
}) 

Answer 2

作業例を更新してください多分それは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); 
     }); 
    }); 

Answer 3

を助け、あなたが一つだけ選択可能TDを持つようにしたいか、または複数のもの？どちらの方法でもJavaScriptを使う必要があります。これはCSSとHTMLだけではできません。

いずれにしても、jQueryを使用し、'.selected'クラスをtdクリックしてから、ボタンをクリックするだけで、'.selected'クラスのtd IDをフェッチするだけです。

$('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