Question

我有一个HTMl，如下所示

<table class="table table-striped table-bordered table-hover">
    <tbody id="tablebody">
        <tr>
            <td align="left" valign="middle" width="30%"><b>Screen Name</b>
            </td>
            <td align="left" valign="middle" width="30%"><b>Convinience Charges</b>
            </td>
            <td align="left" valign="middle" width="25%"><b>Minium</b>
            </td>
            <td align="center" valign="middle" width="15%"><b>Action</b>
            </td>
        </tr>

        <tr>
            <td align="left" valign="middle" width="30%">
                <p>FirstScreen</p>
            </td>
            <td align="left" valign="middle" width="30%">
                <p>11</p>
            </td>
            <td align="left" valign="middle" width="25%">
                <p>32</p>
            </td>
            <td align="center" valign="middle" width="15%"> <a id="566" data-toggle="modal" href="#responsivepopupscreen" class="btn mini green editscreeen"><i class="icon-plus"></i> Edit</a>
            </td>
        </tr>


        <tr>
            <td align="left" valign="middle" width="30%">
                <p>SeccondScreen</p>
            </td>
            <td align="left" valign="middle" width="30%">
                <p>12</p>
            </td>
            <td align="left" valign="middle" width="25%">
                <p>56</p>
            </td>
            <td align="center" valign="middle" width="15%"> <a id="345" data-toggle="modal" href="#responsivepopupscreen" class="btn mini green editscreeen"><i class="icon-plus"></i> Edit</a>
            </td>
        </tr>



    </tbody>
</table>

如何点击相应的编辑按钮 FirstScreen，11,32，锚点ID值（566）

同样 SeccondScreen，12,56，锚点ID值（345），点击相应的编辑按钮

我试过这种方式

$(document).on("click", ".editscreeen", function (e) {
        $(this).closest.find('<tr>').each(function(){
          var value = $(this).find("p").html();

        });
});

http://jsfiddle.net/c9qrvrqx/2/

如果需要，我可以添加p标签的属性。任何人都可以帮助我

Answer 1

你需要重新编写你的脚本，因为你在里面有错误就像是一个函数所以它需要像这个最接近（），然后你不要添加＆lt;＆gt;到jQuery里面的tr元素，你只需要tr等......

以下是一个工作示例http://jsfiddle.net/c9qrvrqx/3/

$(document).on("click", ".editscreeen", function (e) {
    e.preventDefault();
        $(this).closest('tr').find('td p').each(function(){
          var value = $(this).html();
            alert(value);        
        });
});

或者要获取数组中的所有值，只需更改此http://jsfiddle.net/c9qrvrqx/7/

之类的脚本

$(document).on("click", ".editscreeen", function (e) {
    e.preventDefault();
    var pValue = [];
        $(this).closest('tr').find('td p').each(function(){
          var value = $(this).html();
            pValue.push(value);        
        });
    pValue.push('anchor id value ('+$(this).attr('id')+')' );

    alert(pValue); // Do what you need with the values
});

pValue将按此顺序包含数组

FirstScreen，11,32，锚id值（566）等。

Answer 2

使用.map时相当容易，$(document).on("click", ".editscreeen", function (e) { var result = $(this).closest('tr').find('td:not(":last-child")').map(function(){ //Loop all the td except the last child return $(this).text(); //Get the text value }).get(); //Transform the jQuery array like object into an array result.push(this.id); //Add the current anchor id. });遍历所选元素并创建一个返回值的数组

$.trim()

http://jsfiddle.net/c9qrvrqx/4/

要删除空白区域，您可以使用{{1}}。

Answer 3

请找到下面的改变小提琴

DEMO LINK

$(document).on("click", "#tablebody tr", function (e) {

    $(this).find('p').each(function(){
      var value = $(this).html();
    alert(value);        
    });
});

如何为HTML表中的行提取相应的td值

3 个答案: