获取ui-grid的所有值(在每个

Get all the values of a ui-grid (inside each <div> of each <li>)

本文关键字：ui-grid 获取      更新时间：2023-09-26
每个<光>)。

我实际上用ui-grid-b(3列)制作了动态表。我得到了一个生成行(不包括但不需要解决)的函数，我可以通过单击它们来删除行。我的问题是，在网格的修改结束时，我需要得到表的数据并保存它。目前，考虑到表是动态的，我不知道如何访问所有这些数据，因此可以删除行数变化和其他行中间的一行。下面是我的表的演示(有硬编码的行，但它的代码是由js.append()函数生成的):http://jsfiddle.net/xLrm2r1t/2/

<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, .prev和prevUntil，但我只是没有找到一个好的方法来做它。

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

你可以给每个元素你想要的数据一个唯一的类，他们都共享。然后简单地使用该类选择它们，遍历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上面的value变量在每次迭代中将有以下值:

Title, Header 1, Header 2, Header 3, Info1, Info2, Info3, Info4, Info5, Info6

相关文章：