Question

我有一个包含100行和td的表。如下所示

<table border="0" cellpadding="0" cellspacing="0" id="artcle-title" >
  <tr>
   <td>Artcle details 1</td>
  </tr>
  <tr>
   <td>Artcle details 2</td>
  </tr>
  <tr>
   <td>Artcle details 3</td>
  </tr>
  <tr>
   <td>Artcle details 4</td>
  </tr>
....
 </table>

当用户点击td内容时，我想显示与所选表格相关的单独内容表。我想在单独的表格中显示内容。我的意思是选定的表格。我的问题是

我如何识别选择哪个表（没有传递任何参数，例如：funshow（td_id1）等）

有人知道吗？

Answer 1

在桌面上，放置一个onclick事件：

HTML：

<table onclick="lineSelected(event||window.event)">...</table>

javascript：

function lineSelected(ev){
  var target = ev.target || ev.srcElement;
  // target is the clicked element (TD, TR,...)
  // Place here the code to detect which line is selected, ie:
  // content of a cell in that row, counting the lines, an id on the tr,...
}

这是将事件附加到DOM元素的旧方法，但它是跨浏览器并且易于启动。然后，您可以开始使用attachEvent或addEventListener

Answer 2

您可以将click处理程序附加到tr中的每个table元素。单击此处理程序后，将调用此处理程序，您将能够获取基础DOM元素。获得元素后，您可以修改其内容。根据您是否使用javascript框架，实现这一点的方式会有所不同。例如，使用jQuery：

$(function() {
    $('table tr').click(function() {
        $(this).html('<td>some new contents</td>');
    });
});

Answer 3

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
    $("table#articles td").each(function(){
        $(this).click(function(){
            $(".tdcontent").html($(this).html());
        });
    });
});
</script>

将使用id articles和click处理程序附加到表中的每个td。单击的td的内容将写入具有类tdcontent的元素。不应该根据自己的需要自定义这个例子。

jQuery

使用html中的javascript识别所选的td

3 个答案: