从表中检索特定数据

Question

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

问题：

通过使用 javascript 和 jquery 按链接“info”来找到检索数据“aaa”的解决方案时遇到问题。 换句话说，如何通过 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>

Answer 1

你的问题我不清楚，但下面的小提琴实现了问题中指定的目标，即检索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/

Answer 2

我同意 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>

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

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

Answer 3

是的，我也不清楚这个请求。 但我认为你可能想要这样的东西（开始你的路上..）

$('#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>

Answer 4

鉴于问题中修改后的 html ，我建议使用：

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

JS 小提琴演示。

---

参考：

• click() 。
• closest() 。
• find() 。
• text() 。