从表中检索特定数据

retrieve specific data from the table

本文关键字：数据 检索      更新时间：2023-09-26

目标：
按链接"info"从"tr"中的第一个"td"检索数据"aaa"。例如，如果按下第一个"tr"中的链接"info"，我应该从第一个"tr."中检索数据"aaa"。

问题：

遇到问题，无法通过按找到检索数据"aaa"的解决方案链接"信息"通过使用javascript和jquery。换句话说，如何通过jquery和javascript 检索数据

请记住，我还需要为与业务逻辑相关的其他方法传递值aaa。

另外，列表中的行数可以每天更改。

   <table border="1" SUMMARY="aaa" id="tblProjekt">
    <thead>
        <tr>
            <th>Projekt name</th>
            <th>Total time</th>
            <th>Task</th>
            <th>comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaa</td>
            <td>aaa</td>
            <td>aaa</td>
            <td><a href='#' onclick='startPoint(); return false;'>info</a></td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>bbb</td>
            <td>bbb</td>
            <td><a href='#' onclick='startPoint(); return false;'>info</a></td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>bbb</td>
            <td>bbb</td>
            <td><a href='#' onclick='startPoint(); return false;'>info</a></td>
        </tr>      
    </tbody>
</table>

我同意3nigma的观点，即问题不清楚。如果您希望链接出现在每一行中，并在单击后显示第一个单元格的内容，下面是解决方案(请参阅jsfiddle(：

jQuery('#tblProjekt').delegate('a.startPoint', 'click', function(event){
    event.preventDefault();
    var info = jQuery(this).parents('tr').find('td:first-child').html();
    alert(info);
});

这将显示我刚才描述的警报弹出窗口。它假设你的HTML应该是这样的：

<table border="1" SUMMARY="aaa" id="tblProjekt">
    <thead>
        <tr>
            <th>Projekt name</th>
            <th>Total time</th>
            <th>Task</th>
            <th>comments</th>
            <th>(link for more info)</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaa1</td>
            <td>aaa2</td>
            <td>aaa3</td>
            <td>aaa4</td>
            <td><a href="#" class="startPoint">info</a></td>
        </tr>
        <tr>
            <td>bbb1</td>
            <td>bbb2</td>
            <td>bbb3</td>
            <td>bbb4</td>
            <td><a href="#" class="startPoint">info</a></td>
        </tr>  
    </tbody>
</table>

它有帮助吗？这是你需要的吗？

Ps。我从您的代码中删除了内联JavaScript。如果可能的话，尽量避免这种情况。

是的，我也不清楚这个请求。但我想你可能想要这样的东西(让你开始你的旅程…(

$('#oneColumnInfo').click(function(){
    var oneColumnText = $('tbody tr td:first').text();
    alert(oneColumnText);
    return false;
});
$('#twoColumnInfo').click(function(){
    var twoColumnText = $('tbody tr td:first').next().text();
    alert(twoColumnText);
    return false;
});

http://jsfiddle.net/jasongennaro/eaSMS/

顺便说一句，我删除了内联click events。

<table border="1" SUMMARY="aaa" id="tblProjekt">
    <thead>
        <tr>
            <th>Projekt name</th>
            <th>Total time</th>
            <th>Task</th>
            <th>comments</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>aaa</td>
            <td>abc</td>
            <td>aaa</td>
            <td>aaa</td>
        </tr>
        <tr>
            <td>bbb</td>
            <td>bbb</td>
            <td>bbb</td>
            <td>bbb</td>
        </tr>      
        <tr>
            <td><a href='#' id="oneColumnInfo">info</a></td>
            <td><a href='#' id="twoColumnInfo">info</a></td>
            <td><a href='#'>info</a></td>
            <td><a href='#'>info</a></td>
        </tr>       
    </tbody>
</table>

考虑到问题中修改后的html，我建议使用：

$('td a').click(
    function(){
        var projektName = $(this).closest('tr').find('td:first').text();
        alert(projektName);
        return false;
    });

JS Fiddle演示。

参考文献：

  • CCD_ 2
  • closest()
  • find()
  • text()

我不清楚您的问题，但下面的fiddle实现了问题中指定的目标，即检索aaa

$("a:contains('info')").click(function(){
var v = $("#tblProjekt >tbody> tr:first>td").html();
alert(v);
});

http://jsfiddle.net/JKByC/1/

编辑

对于更新的html

$("a").click(function(){
    var v = $(this).closest("tr").children(':first-child').text();
    alert(v);
});

这是小提琴http://jsfiddle.net/sDZ7q/

相关文章：