HTML - 製作一個TD點擊並傳遞價值的onsubmit

Question

我有下面的工作示例：

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

我要讓每個TDclickable（無論是突出它周圍放境）的onclick按鈕1或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

給ID到每一個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> 

和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並在td點擊添加一個'.selected'類，然後在按鈕點擊，只是獲取那些對他們有'.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