1

在此表中，我每行有 1 个复选框。如何从复选框选中的所有行中返回 Categorynames 列表？

html:

<tbody>
    <table>
        <tr style="height: auto" role="row" class="jqgfirstrow">
            <td style="height: 0px; width: 55px;" role="gridcell">
            </td>
            <td style="height: 0px; width: 150px;" role="gridcell">
            </td>
            <td style="height: 0px; width: 150px;" role="gridcell">
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="1">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Beverages" style="text-align: left;"
                role="gridcell">
                Beverages
            </td>
            <td aria-describedby="jqgCategories_Description" title="Soft drinks, coffees, teas, beers, and ales"
                style="text-align: left;" role="gridcell">
                Soft drinks, coffees, teas, beers, and ales
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="2">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Condiments" style="text-align: left;"
                role="gridcell">
                Condiments
            </td>
            <td aria-describedby="jqgCategories_Description" title="Sweet and savory sauces, relishes, spreads, and seasonings"
                style="text-align: left;" role="gridcell">
                Sweet and savory sauces, relishes, spreads, and seasonings
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="7">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Produce" style="text-align: left;"
                role="gridcell">
                Produce
            </td>
            <td aria-describedby="jqgCategories_Description" title="Dried fruit and bean curd"
                style="text-align: left;" role="gridcell">
                Dried fruit and bean curd
            </td>
        </tr>
        <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="8">
            <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
                <input type="checkbox" value="true" name="Catchecked" id="Catchecked"><input type="hidden"
                    value="false" name="Catchecked">
            </td>
            <td aria-describedby="jqgCategories_Name" title="Seafood" style="text-align: left;"
                role="gridcell">
                Seafood
            </td>
            <td aria-describedby="jqgCategories_Description" title="Seaweed and fish" style="text-align: left;"
                role="gridcell">
                Seaweed and fish
            </td>
        </tr>
    </table>
</tbody>
4

5 回答 5

0

试试这个：

$('input[type="checkbox"]').change(function(){
    var cat = $('input[type="checkbox"]:checked').parent().next().map(function(){
                    return $(this).attr('aria-describedby')
              }).get()
})

演示

于 2012-08-03T04:18:43.913 回答
0 
$('#clickhere').click(function() {
    var categories = [];
    $('input:checkbox:checked').each(function() {
        categories.push($(this).parent('td').next('td').text().trim());
    });
    alert(categories);
});

http://jsfiddle.net/LvbDQ/1/

于 2012-08-03T04:23:54.627 回答
0

每当您需要从表中收集类别时，将其放入某个函数中：

var table = ...; // get the table DOMElement or jQuery object here
var categories = [];
$(':checkbox[checked]', table).each(function() {
    categories.push($(this).parent().next().text().trim());
});
//alert(categories);   // return an array of categories

这是jsFiddle。

于 2012-08-03T04:24:16.947 回答
0

我不确定您将如何处理每个检查的值，但以下内容将获得您正在寻找的文本。

$("table input[type=checkbox]:checked").each(function()
  {
     console.log($.trim($("td[aria-describedby=jqgCategories_Name]", $(this).closest("tr")).text()));
  });
于 2012-08-03T04:29:23.487 回答
0

您可以在此处找到上述查询的完整解决方案。

演示： http ://codebins.com/bin/4ldqp8w

HTML

<div class="input">
  <span>
    <input type="button" name="btnget" id="btnget" value="Get Categories"/>
  </span>
  <span id="result">
  </span>
</div>

<table>
  <tr style="height: auto" role="row" class="jqgfirstrow">
    <td style="height: 0px; width: 55px;" role="gridcell">
    </td>
    <td style="height: 0px; width: 150px;" role="gridcell">
    </td>
    <td style="height: 0px; width: 150px;" role="gridcell">
    </td>
  </tr>
  <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="1">
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
      <input type="checkbox" value="true" name="Catchecked" id="Catchecked">
      <input type="hidden"
      value="false" name="Catchecked">
    </td>
    <td aria-describedby="jqgCategories_Name" title="Beverages" style="text-align: left;"
    role="gridcell">
      Beverages
    </td>
    <td aria-describedby="jqgCategories_Description" title="Soft drinks, coffees, teas, beers, and ales"
    style="text-align: left;" role="gridcell">
      Soft drinks, coffees, teas, beers, and ales
    </td>
  </tr>
  <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="2">
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
      <input type="checkbox" value="true" name="Catchecked" id="Catchecked">
      <input type="hidden"
      value="false" name="Catchecked">
    </td>
    <td aria-describedby="jqgCategories_Name" title="Condiments" style="text-align: left;"
    role="gridcell">
      Condiments
    </td>
    <td aria-describedby="jqgCategories_Description" title="Sweet and savory sauces, relishes, spreads, and seasonings"
    style="text-align: left;" role="gridcell">
      Sweet and savory sauces, relishes, spreads, and seasonings
    </td>
  </tr>
  <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="7">
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
      <input type="checkbox" value="true" name="Catchecked" id="Catchecked">
      <input type="hidden"
      value="false" name="Catchecked">
    </td>
    <td aria-describedby="jqgCategories_Name" title="Produce" style="text-align: left;"
    role="gridcell">
      Produce
    </td>
    <td aria-describedby="jqgCategories_Description" title="Dried fruit and bean curd"
    style="text-align: left;" role="gridcell">
      Dried fruit and bean curd
    </td>
  </tr>
  <tr class="ui-widget-content jqgrow ui-row-ltr" role="row" tabindex="-1" id="8">
    <td aria-describedby="jqgCategories_act" title="" style="text-align: center;" role="gridcell">
      <input type="checkbox" value="true" name="Catchecked" id="Catchecked">
      <input type="hidden"
      value="false" name="Catchecked">
    </td>
    <td aria-describedby="jqgCategories_Name" title="Seafood" style="text-align: left;"
    role="gridcell">
      Seafood
    </td>
    <td aria-describedby="jqgCategories_Description" title="Seaweed and fish" style="text-align: left;"
    role="gridcell">
      Seaweed and fish
    </td>
  </tr>
</table>

jQuery：

 $(function() {
    $("#btnget").click(function() {
        $("#result").html("");
        var categories = new Array();
        $(".jqgrow").each(function() {
            if ($(this).find("td:first input[type=checkbox]").is(":checked")) {
                categories.push($(this).find("td[aria-describedby=jqgCategories_Name]").text().trim());
            }
        });
        if (categories.length > 0) {
            $("#result").html(categories.join(","));
        }
    });
});

演示： http ://codebins.com/bin/4ldqp8w

于 2012-08-03T11:52:41.410 回答