如何通過單擊表格來檢測單元格？

Question

我有一個問題，我的代碼...實際上，我發現了一個代碼，我嘗試了它的工作（http://www.srccodes.com/p/article/40/determine-click-position-row-column-number-onclick-table-cell），但當我嘗試創建一個函數的表，它不工作，我找不到原因... 。 請幫忙 ！！這裏是代碼： 謝謝！

$(document).ready(function() 
 
{ 
 
//my function to create my table 
 
$("#btn-create-table").click(function create_new_table(){ 
 

 
    var nb_columns = document.getElementById("columns").value; 
 
    var nb_rows = document.getElementById("rows").value; 
 

 
    var table=document.createElement("table"); 
 
    $(table).attr("element", "table"); 
 
    $(table).append(thead=document.createElement("thead")); 
 

 
    $(thead).append(line=document.createElement("tr")); 
 

 
    for (var j=0; j<nb_columns;j++) { 
 
     $(line).append(document.createElement("th")); 
 
    }; 
 

 
    $(table).append(tbody=document.createElement("tbody")); 
 

 
    for(var j=0;j<nb_rows;j++){ 
 

 
    $(tbody).append(line=document.createElement("tr")) 
 

 
     for (var k=0; k<nb_columns;k++) { 
 
      $(line).append(td=document.createElement("td")); 
 
    }; 
 
    };   
 

 
$("#content").append(table); 
 
}); 
 

 
//the function I've found to detect rows and columns on mouse click 
 
$("[element = 'table'] td").click(function() {  
 
     var column_num = parseInt($(this).index()); 
 
     var row_num = parseInt($(this).parent().index());  
 
    
 
     $("#result").html("Row_num =" + row_num + " , Rolumn_num ="+ column_num); 
 
    }); 
 

 

 
});

table { 
 

 
    border-collapse: collapse; 
 
    width: 100%; 
 
    height: 60px; 
 
} 
 

 
table td { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    height: 60px; 
 
    text-align: center; 
 
} 
 

 
table thead { 
 
    width: 100%; 
 
    height: 60px; 
 
    background-color: rgba(0, 0, 255, 0.2); 
 
} 
 

 
table th { 
 
    border-width: 1px; 
 
    border-style: solid; 
 
    border-color: grey; 
 
    height: 60px; 
 
    text-align: center; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
 
<div> 
 
    <label for="columns"> 
 
     <input id="columns" type="number" min="1" placeholder="columns"></input> 
 
    </label> 
 
    <br /> 
 
    <label for="rows" class=""> 
 
     <input id="rows" type="number" min="1" placeholder="rows"></input> 
 
    </label> 
 
    <br /> 
 
    <button id="btn-create-table">create</button> 
 
    
 
<div id="content" contentEditable="true"> 
 
    <div id="result"></div> 
 
    <table element="table"> 
 
    <thead> 
 
     <tr> 
 
      <th>1</th> 
 
      <th>2</th> 
 
      <th>3</th> 
 
      <th>4</th> 
 
      <th>5</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
    <!--1st ROW--> 
 
    <tr> 
 
     <td>row 1, col 1</td> 
 
     <td>row 1, col 2</td> 
 
     <td>row 1, col 3</td> 
 
     <td>row 1, col 4</td> 
 
     <td>row 1, col 5</td> 
 
    </tr> 
 
    
 
    <!--2nd ROW--> 
 
    <tr> 
 
     <td>row 2, col 1</td> 
 
     <td>row 2, col 2</td> 
 
     <td>row 2, col 3</td> 
 
     <td>row 2, col 4</td> 
 
     <td>row 2, col 5</td> 
 
    </tr> 
 
    
 
    <!--3rd ROW--> 
 
    <tr> 
 
     <td>row 3, col 1</td> 
 
     <td>row 3, col 2</td> 
 
     <td>row 3, col 3</td> 
 
     <td>row 3, col 4</td> 
 
     <td>row 3, col 5</td> 
 
    </tr> 
 
    
 
    <!--4th ROW--> 
 
    <tr> 
 
     <td>row 4, col 1</td> 
 
     <td>row 4, col 2</td> 
 
     <td>row 4, col 3</td> 
 
     <td>row 4, col 4</td> 
 
     <td>row 4, col 5</td> 
 
    </tr> 
 
    
 
    <!--5th ROW--> 
 
    <tr> 
 
     <td>row 5, col 1</td> 
 
     <td>row 5, col 2</td> 
 
     <td>row 5, col 3</td> 
 
     <td>row 5, col 4</td> 
 
     <td>row 5, col 5</td> 
 
    </tr> 
 
</tbody> 
 
</table> 
 
    
 
</div>

Answer 1

既然你正在創建的動態表，你應該使用.on代替.click deligate處理程序..查收以下撥弄我創建https://jsfiddle.net/n7rxjoft/

修改的jQuery

$(document).ready(function() 
{ 
//my function to create my table 
$("#btn-create-table").click(function create_new_table(){ 

    var nb_columns = document.getElementById("columns").value; 
    var nb_rows = document.getElementById("rows").value; 

    var table=document.createElement("table"); 
    $(table).attr("element", "table"); 
    $(table).append(thead=document.createElement("thead")); 

    $(thead).append(line=document.createElement("tr")); 

    for (var j=0; j<nb_columns;j++) { 
     $(line).append(document.createElement("th")); 
    }; 

    $(table).append(tbody=document.createElement("tbody")); 

    for(var j=0;j<nb_rows;j++){ 

    $(tbody).append(line=document.createElement("tr")) 

     for (var k=0; k<nb_columns;k++) { 
      $(line).append(td=document.createElement("td")); 
    }; 
    };   

$("#content").append(table); 
}); 

//the function I've found to detect rows and columns on mouse click 
$(document).on('click','table td', function() {  
     var column_num = parseInt($(this).index()); 
     var row_num = parseInt($(this).parent().index());  

     $("#result").html("Row_num =" + row_num + " , Rolumn_num ="+ column_num); 
    }); 


}); 

Answer 2

據我瞭解，你是動態創建表元素。這就是爲什麼你單擊事件不與控件關聯。

試試下面一個。

$(document).delegate("[element = 'table'] td",'click',function() {  
      var column_num = parseInt($(this).index()); 
      var row_num = parseInt($(this).parent().index());  

      $("#result").html("Row_num =" + row_num + " , Rolumn_num ="+ column_num); 
     }); 

Answer 3

您必須使用$（document）.on（'event_name'，function（）{...}）方法在HTML頁面上動態創建的元素上綁定事件。

$(document).on('click',"table[element="table"] td",function() { 
    var col_pos = parseInt($(this).index())+1; 
    var row_pos = parseInt($(this).parent().index())+1; 
    console.log("Row: " + row_pos + " , Column:"+ col_pos); 
});