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

据我所知，您正在动态创建表元素。这就是你点击事件的原因与控制无关。

尝试低于一个。

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

由于您是动态创建表格，因此您应该使用.on代替.click来处理处理程序..请检查我创建的以下小提琴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 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 );
});

如何通过单击表格来检测单元格？

3 个答案: