jquery选择tablerow数据的有效方法

时间:2014-12-09 10:32:07

标签: javascript jquery html

我有一个包含相同模式的多行的表:

<tr role="row" class="even">
  <td><input type="checkbox" id="valj4"></td>
  <td>Generell grupp</td>
  <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b5">IKT Ipad11-    Mirko</a></td>
  <td>Grundinställningar</td>
</tr>

每一行都有一个带唯一ID的复选框,这是获取带复选复选框的行的UUID列表的最有效方法。我想使用jQuery。

7 个答案:

答案 0 :(得分:3)

$(function() {
  var texts = [];
  $('tr td:has(input:checkbox:checked) ~ td > a').each(function(i, e) {
    texts.push($(e).attr('href'));
  });
  $('#result').html(texts.join('<br/>'));
  
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4" checked>
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b5">IKT Ipad11-    Mirko (...5)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4">
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b6">IKT Ipad11-    Mirko (...6)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
  <tr role="row" class="even">
    <td>
      <input type="checkbox" id="valj4" checked>
    </td>
    <td>Generell grupp</td>
    <td><a href="/Home/DeviceDetails?uuid=2b9fe569-dd6a-403c-b973-fd577acf12b7">IKT Ipad11-    Mirko (...7)</a>
    </td>
    <td>Grundinställningar</td>
  </tr>
</table>
<div id="result"/>

获取UUID是一个简单的字符串切割练习。

答案 1 :(得分:1)

我假设你的桌子有一个id,它是“#table-id”:

$("#table-id").find(":checked")

会给你所有选中的复选框和单选框。

$("#table-id").find("input[type='checkbox']:checked")

会给你所有选中的复选框。

var ids = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
    ids += $(this).attr("id") + ",";
});

会给你一个逗号分隔的列表,其中包含表格中已选中复选框的ID。

和UUIDS名单:

var UUIDs = "";
$("#table-id").find("input[type='checkbox']:checked").each(function(){
    var href = $(this).closest("tr").find("td > a").first().attr("href");
    var UUID = href.split('?')[1];
    UUIDS += UUID + ",";
});

答案 2 :(得分:1)

我会尝试以下

var ids = [];
$("#table input:checkbox:checked").each(function () {
    var uuid = getParameter($(this).closest('tr').find('a').eq(0).attr('href'))
    ids.push(uuid);
});

function getParameter(url) {
    var regex = new RegExp("[\\?&]uuid=([^&#]*)"),
        results = regex.exec(url);
    return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}

其中#table是您的表的ID

Example

答案 3 :(得分:0)

创建一个新的UUID列表。

var listOfUUIDs = [];

获取选中的输入,转到祖父母(tr),然后在里面找到它。

浏览一个列表,将UUID添加到列表中。

$("tr input[checked=checked]").parent().parent().find("td a").each(function(){ 
    listOfUUIDs.push(
        $(this).prop('href').substr(indexOf("uuid=") + 5)
    )
});

答案 4 :(得分:0)

jQuery(&#39;#formId&#39;)。find(&#39; tr [class = even]&#39;)。each(function(){

var rowId = "";

this.find('input[type=checkbox]').each(function() {

    if(this.checked) {
        rowId = "row" + $(this).val();
    }

});
$(this).attr('id', rowId);

});

答案 5 :(得分:-1)

这应该可以满足您的需求。

$('tr').each(function(index) {
    var $this   = $(this), 
        input   = $this.find('input'),
        result  = '';

    if ( input.is(':checked') ) {
        var uuid    = $this.find('a').attr('href').replace(/^\/Home\/DeviceDetails\?uuid=/g, ""),
            result  = result + index + '. ' + input.attr('id') + ' has the uuid: ' + uuid + '<br />';
    }

    $('#result').html(result);
});

答案 6 :(得分:-2)

试试这个

$( "input[type=checkbox]" ).change(function() {
 if($(this).is(":checked")) {
     alert($(this).attr("id"));
  }
 });