Question

我正在开发一个小网页。

在这个页面上，我有一个表，并创建了一个获取id并返回图像的函数。

一切正常，问题是每当我点击一行就会执行该功能。

我只是希望在点击附加的id列时执行该功能。（第二栏）

有人可以帮我吗？

实现了我的怀疑？

谢谢大家。

    <script>
function addRowHandlers() {
    var table = document.getElementById("tableId");
    var rows = table.getElementsByTagName("td");
    for (i = 0; i < rows.length; i++) {
        var currentRow = table.rows[i];
        var createClickHandler = 
            function(row) 
            {
                return function() { 
                                        var cell = row.getElementsByTagName("td")[1];
                                        var id = cell.innerHTML;

                                        //use ajax to post id to ajax.php file
                                        $.post("ajax.php", { id:id }, function( data ) { 
                                              //add result to a div and create a modal/dialog popup similar to alert()
                                              $('<div />').html(data).dialog();
                                        });

                                 };
            };

        currentRow.onclick = createClickHandler(currentRow);
    }
}
window.onload = addRowHandlers();
</script>

Answer 1

您已经在使用jQuery了，所以......让我们使用jQuery：

// Process the code on document ready
$(function() {
    // Hook "click" on the table, but only actually call the handler if the
    // click passed through the second cell in a row
    $("#tableId").on("click", "tr td:nth-child(2)", function() {
        // Do the post
        $.post("ajax.php", {
            id: $(this).text() // <== Getting the id by getting the text of the clicked cell
        }, function(data) {
            //add result to a div and create a modal/dialog popup similar to alert()
            $('<div />').html(data).dialog();
        });
    });
});

的差异：

我们在文档就绪而不是窗口加载方面做了这件事，这是很早以前的事情。
在每个表格单元格上使用委托处理程序而不是处理程序。
使用:nth-child(2)获取行中的第二个td。请注意，这假设您的行中只有单元格（99.9999％为true;但是也允许template）。
使用$(this).text()获取id

以下是显示id而不是$.post电话的示例：

＆＃13;

// Process the code on document ready
$(function() {
    // Hook "click" on the table, but only actually call the handler if the
    // click passed through the second cell in a row
    $("#tableId").on("click", "tr td:nth-child(2)", function() {
        alert($(this).text());
    });
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<table id="tableId">
  <tbody>
    <tr>
      <td>Foo</td>
      <td>23</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>42</td>
      <td>Bar</td>
    </tr>
    <tr>
      <td>Foo</td>
      <td>67</td>
      <td>Bar</td>
    </tr>
  </tbody>
</table>

＆＃13;

Answer 2

将单击处理程序放在单元格而不是行

上

var currentRow = table.rows[i];
var cell = currentRow.getElementsByTagName("td")[1];
var createClickHandler = function(cell) 
    {
        return function() { 
            var id = cell.innerHTML;
            //use ajax to post id to ajax.php file
            $.post("ajax.php", { id:id }, function( data ) { 
                  //add result to a div and create a modal/dialog popup similar to alert()
                  $('<div />').html(data).dialog();
            });
         };
    };
cell.onclick = createClickHandler(cell);

Answer 3

为什么你没有尝试使用id意味着给每个td的id以及你想要的onclick功能你可以做到这一点

如何在php表中执行javascript函数

3 个答案: