获取ui-grid的所有值(在每个<li>的每个<div>内)

时间:2015-10-08 14:25:24

标签: javascript html jquery-mobile

我实际上是用ui-grid-b(3列)制作的动态表。我有一个生成行的函数(不包括但不必解决),我可以通过单击删除行。我的问题是,在修改网格结束时,我需要获取表的数据并保存它。目前,我不知道如何访问所有这些数据,因为该表是动态的,因此可以删除行更改的数量和其他行中间的一行。这是我的表的演示(带有硬编码的行,但它是由js.append()函数生成的代码。):https://developers.google.com/maps/documentation/javascript/shapes

<ul class="Table" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
                <li style="text-align: center !important">
                    <label>Title</label>
                </li>
                <li data-role="list-divider">
                    <div class="ui-grid-b">
                        <div class="ui-block-a" style="width:33%">Header 1</div>
                        <div class="ui-block-b" style="width:34%">Header 2</div>
                        <div class="ui-block-c" style="width:33%">Header 3</div>
                    </div>
                </li>
                <li id="addedRow">
                    <a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
                        <div class="ui-grid-b">
                            <div class="ui-block-a" style="width:33%">Info1</div>
                            <div class="ui-block-b" style="width:34%">Info2</div>
                            <div class="ui-block-c" style="width:33%">Info3</div>
                        </div>
                    </a>
                </li>
                <li id="addedRow">
                    <a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
                        <div class="ui-grid-b">
                            <div class="ui-block-a" style="width:33%">Info4</div>
                            <div class="ui-block-b" style="width:34%">Info5</div>
                            <div class="ui-block-c" style="width:33%">Info6</div>
                        </div>
                    </a>
                </li>
            </ul>

目前,我尝试了很多方法.prevAll.prevprevUntil,但我找不到合适的方法。

我只想要一种方法来获取动态表格的每个单元格中的值。

1 个答案:

答案 0 :(得分:1)

您可以为每个拥有数据的元素提供他们所需的唯一类。然后只需使用该类选择它们,迭代jQuery数组并从每个数据中获取所需的数据。

<ul class="Table" data-role="listview" data-inset="true" data-icon="false" style="min-width:350px">
                <li style="text-align: center !important">
                    <label class="has-data">Title</label>
                </li>
                <li data-role="list-divider">
                    <div class="ui-grid-b">
                        <div class="ui-block-a has-data" style="width:33%">Header 1</div>
                        <div class="ui-block-b has-data" style="width:34%">Header 2</div>
                        <div class="ui-block-c has-data" style="width:33%">Header 3</div>
                    </div>
                </li>
                <li id="addedRow">
                    <a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
                        <div class="ui-grid-b">
                            <div class="ui-block-a has-data" style="width:33%">Info1</div>
                            <div class="ui-block-b has-data" style="width:34%">Info2</div>
                            <div class="ui-block-c has-data" style="width:33%">Info3</div>
                        </div>
                    </a>
                </li>
                <li id="addedRow">
                    <a href="#" onclick="javascript:$(this).closest('li').remove();RowCount--;">
                        <div class="ui-grid-b">
                            <div class="ui-block-a has-data" style="width:33%">Info4</div>
                            <div class="ui-block-b has-data" style="width:34%">Info5</div>
                            <div class="ui-block-c has-data" style="width:33%">Info6</div>
                        </div>
                    </a>
                </li>
            </ul>

然后:

var elements = $('.has-data');
$.each(elements,
    function (index, object) {
        var value = $(object).text();
        // value now has the text content of the current element
    }
);

因此,例如,值变量上方的HTML将为每次迭代具有以下值:

标题,标题1,标题2,标题3,信息1,信息2,信息3,信息4,信息5,信息6