如何使用jQuery中事件給table的每個td系結事件

2019-12-12 12:58:06

一般情況下，如果使用JavaScript中的onClick事件給table的td系結事件，是直接繫結在元素標籤上；如果是使用jQuery方法，需要將table的td進行迴圈遍歷，依次系結事件。但是，可以直接查詢到td元素，直接使用click進行系結事件。下面利用範例說明，操作如下：

第一步，建立一個HTML5靜態頁面，將jquery檔案引入到頁面中，注意檔案路徑，如下圖所示：

第二步，在<body></body>標籤元素中，插入一個div和table，帶表頭有五行，如下圖所示：

第三步，使用標籤元素給table設定樣式，如邊框、寬度、邊框合併等，還有tr th和tr td，如下圖所示：

第四步，在<script></script>定義td標籤點選函數，獲取點選表格的行和列，如下圖所示：

第五步，再在jQuery初始化函數內，獲取table的td物件，使用click()方法系結點選事件，如下圖所示：

第六步，儲存程式碼並開啟瀏覽器，預覽頁面效果；然後依次點選表格的單元格，檢視列印的值，如下圖所示：