使用javascript / jquery從表的給定行中提取Cell / Td / tabledata值

Question

這是我在Asp.net MVC剃刀視圖中使用的html表

<table class="table-striped table-bordered">
  <thead>
    <tr>

        <th class="col-md-2">
            Id
        </th>
        <th class="col-md-4">
            Description
        </th>
        <th class="col-md-3">
            Quantity
        </th>
        <th class="col-md-3">
            AssetType
        </th>
    </tr>
</thead>
<tbody>
    @foreach (var i in Model)
    {
        <tr>
            <td class="col-md-2">
                @i.Id
            </td>
            <td class="col-md-4">
                @i.Description
            </td>
            <td class="col-md-3">
                @i.Count
            </td>
            <td class="col-md-3">
                @i.AssetType
            </td>
            <td>
              <a onclick="getId()">Edit</a>
            </td>
        </tr>
    }
</tbody>
</table>

我的Js代碼

<script type="text/javascript">
    var getId = function () {
       //get current row 
       var currentRow = $(this).closest('tr');
       // get the id from the current row. or is there any better way ?         
    }   
</script>

您好在上面的代碼中。 我要做的就是當用戶選擇表中給定行的編輯鏈接時。 我想提取所選行的ID值。

有人可以指導我這一步嗎？ 我看過一些文章，這些文章說如何從每一行中獲取給定的單元格值，但沒有找到可以解釋如何從給定行中提取數據單元格值的文章。

Answer 1

因為您是從服務器端生成HTML的，所以您已經擁有了它，當用戶單擊時，將id傳遞給函數可以對它進行任何操作。

 <td>
    <a onclick="getId('@i.Id')">Edit</a>
 </td>

function getId(id) {...}

或者，如果您願意，也可以使用以下方法：

 <a onclick="getId(this)">Edit</a>
        function getId(dom){
          var id = $(dom).parent().find('.col-md-2').html();
         }

Answer 2

您可以將id值放在“編輯”鏈接中的data-id屬性中，如下所示

<a data-id="@i.Id" class="edit-button" href="#">Edit</a>

將click事件處理程序添加到編輯鏈接，可以使用$(this).data('id')獲得ID值。

<script type="text/javascript">
    $('.edit-button').on('click', function (e) {
        e.preventDefault();
        alert($(this).data('id'));
    });
</script>

工作提琴： http : //jsfiddle.net/ds4t6jur/