如何使用jQuery获取表格单元格的内容?

时间:2013-02-06 08:21:35

标签: jquery datatables

当我将鼠标悬停在表格单元格上时,内容旁边会显示一个编辑链接。我想得到那个细胞的内容。用jQuery可以吗?

HTML页面是:https://gist.github.com/anonymous/4721230

表的一部分,由JavaScript生成。 https://gist.github.com/anonymous/4721245

3 个答案:

答案 0 :(得分:1)

这是一个可能的解决方案 - Here the fiddle

js代码

var table = $('#tblFollow');


table.dataTable({
    sDom: "t",
    aoColumns: [
      null,
      null,
      { bSortable: false }
    ]
});



table.on('click', 'a', function(e){
    var followingCell = $(this).parents('td').prev();
    var rowIndex = table.fnGetPosition( $(this).closest('tr')[0] );
    var aData = table.fnGetData( rowIndex  );
    alert (aData[0] + " / " + aData[1]+ " / " + aData[2]);

    return false;
});

html代码

<table id="tblFollow">
    <thead>
        <tr>
            <th>id</th>
            <th>name</th>
            <th>link</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>John</td>

            <td><a  href="#">Link</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td>Bill</td>

            <td><a  href="#">Link</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>Anna</td>

            <td><a  href="#">Link</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>Dick</td>
            <td><a  href="#">Link</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>Jane</td>

            <td><a href="#">Link</a></td>
        </tr>
    </tbody>
</table>

答案 1 :(得分:0)

绝对

<table id="this_is_the_one">
 <tbody>
  <tr>
   <td>
     content 1
   </td>
   <td>
     content 2
   </td>
  </tr>
 </tbody>
</table>

<script type="text/javascript">
$('#this_is_the_one td').on('click', function() {
  alert($(this).html());
  //$(this) returns the <td> element being pressed
});
</script>

如果您在表格单元格中有格式代码(HTML)并且您不希望它们显示,您也可以使用HTML和display it in a dialog box,或者您可以(当表格生成时)在PHP脚本中)使用普通内容添加属性并使用$(elem).prop(prop-name)函数来获取该属性的值。

答案 2 :(得分:0)

你可以这样做:

$("#test td").on("mouseover",function(){
    alert($(this).text())
})

这里也是jsFiddle