使用標題單元格文本定位表格單元格-有解無憂

我有如下所示的表格外觀，但它不是單個表格。標題在一個表中，行在另一個表中。

使用標題單元格文本定位表格單元格

標題有 Primary、Language 和 add 按鈕，這是一個表，兩行的其余部分在另一個表中。現在我必須使用標題文本來識別單元格。例如，如果我給出，1 Language那么它必須找到選擇阿拉伯語的第一行第二個單元格。同樣，如果我給2 Primary它找到第二行第一列。

HTML 代碼如下圖所示。如果有可能解決這個問題，那么我將給出實際的代碼。

<div id="d78Pt30" style="width: 35em;" class="gridMaxHeight z-grid">
    <div id="d78Pt30-head" class="z-grid-header" style="">
        <table id="d78Pt30-headtbl" style="table-layout: fixed;" width="100%">
            <colgroup id="d78Px30-hdfaker">
                <col id="d78Py30-hdfaker" style="width: 61px;">
                <col id="d78Pz30-hdfaker" style="">
                <col id="d78P_40-hdfaker" style="width: 50px;">
                <col id="d78Px30-hdfaker-bar" style="width: 0px">
            </colgroup>
            <tbody id="d78Pt30-headrows">
            <tr id="d78Px30"  style="text-align: left;">
                <th id="d78Py30" >
                    <div id="d78Py30-cave" >
                        <div ><i id="d78Py30-sort-icon"></i></div>
                        Primary
                    </div>
                </th>
                <th id="d78Pz30" >
                    <div id="d78Pz30-cave" >
                        <div ><i id="d78Pz30-sort-icon"></i></div>
                        Language
                    </div>
                </th>
                <th id="d78P_40" >
                    <div id="d78P_40-cave" >
                        <div ><i id="d78P_40-sort-icon"></i></div>
                        <a id="d78P040"  href="javascript:;"><img src="assets/images/add.png"
                                                                             align="absmiddle"></a></div>
                </th>
                <th id="d78Px30-bar" class="z-columns-bar"></th>
            </tr>
            </tbody>
        </table>
    </div>
    <div class="z-grid-header-border"></div>
    <div id="d78Pt30-body" class="z-grid-body" style="overflow: auto;">
        <table id="d78Pt30-cave" style="table-layout: fixed;" width="100%">
            <colgroup id="d78Px30-bdfaker">
                <col id="d78Py30-bdfaker" style="width: 61px;">
                <col id="d78Pz30-bdfaker" style="">
                <col id="d78P_40-bdfaker" style="width: 50px;">
            </colgroup>
            <tbody id="d78Pi50" hljs-string">">
            <tr id="d78P260" hljs-string">">
                <td id="d78P360-chdextr" hljs-string">">
                    <div id="d78P360-cell" hljs-string">"><span id="d78P360"
                                                                       hljs-string">"><input
                            type="radio" id="d78P360-real" name="d78P360" checked="checked"><label for="d78P360-real"
                                                                                                   id="d78P360-cnt"
                                                                                                   hljs-string">"></label></span>
                    </div>
                </td>
                <td id="d78P460-chdextr" hljs-string">">
                    <div id="d78P460-cell" hljs-string">"><span id="d78P460" hljs-string">"
                                                                       style="width: 225px;"><input id="d78P460-real"
                                                                                                    hljs-string">"
                                                                                                    autocomplete="off"
                                                                                                    value="" type="text"
                                                                                                    size="20"
                                                                                                    style="width: 196px;"><a
                            id="d78P460-btn" hljs-string">"><i id="d78P460-icon"
                                                                          hljs-string">"></i></a><div
                            id="d78P460-pp" style="display: none;"></div></span></div>
                </td>
                <td id="d78Py60-chdextr" hljs-string">">
                    <div id="d78Py60-cell" hljs-string">">
                        <div id="d78Py60" hljs-string">">
                            <div id="d78Pz60-chdex" hljs-string">" style=""><a id="d78Pz60" hljs-string">"
                                                                                        href="javascript:;"><img
                                    src="assets/images/delete.png" align="absmiddle"></a></div>
                        </div>
                    </div>
                </td>
            </tr>
            </tbody>
            <tbody hljs-string">">
            <tr>
                <td id="d78Pt30-empty" style="display: none;" colspan="3">
                    <div id="d78Pt30-empty-content" hljs-string">">No data available</div>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

正如您在 HTML 中看到的那樣，有兩個表格，第一個包含標題，第二個包含其余行。

uj5u.com熱心網友回復：

由于未提供表格的完整標記，我在答案末尾使用了 HTML 來說明可能的解決方案。

解決方案 1 - 對列索引進行硬編碼

如果表列是_static，最簡單的解決方案是在代碼中硬編碼索引查找。此解決方案還可以更輕松地處理沒有文本的標題單元格 - 例如添加圖示。

例如，您知道“Language”標題始終是列索引 1，“Primary”始終是列索引 0。因此，您知道如果您想要資料行的“Language”，它將是第 2 個單元格排。

def cell_by_header_text(browser, data_row_index, header_text)
  columns = ['Primary', 'Language', 'Add'] # must match the order on the page
  column_index = columns.index(header_text)

  data_table = browser.div(class: 'z-grid-body').table
  data_table[data_row_index - 1][column_index] # returns Watir::Cell
end

p cell_by_header_text(browser, 1, 'Language').html
#=> "<td><select><option selected=\"selected\">Arabic</option><option>Bengali</option></select></td>"
p cell_by_header_text(browser, 2, 'Primary').html
#=> "<td><input type=\"radio\" checked=\"\"></td>"

解決方案 2 - 動態查找列索引

如果表列是動態的，或者您想要更通用的解決方案，您可以從標題表中查找列索引。

def cell_by_header_text(browser, data_row_index, header_text)
  header_table = browser.div(class: 'z-grid-header').table
  column_index = header_table.tds.find_index { |td| td.text == header_text }

  data_table = browser.div(class: 'z-grid-body').table
  data_table[data_row_index - 1][column_index] # returns Watir::Cell
end

解決方案 3 - 特定領域的集合

如果您想提高可讀性并具有更大的靈活性，您可以更進一步，為網格創建一個特定于域的集合：

class LanguageRowCollection
  include Enumerable

  def initialize(browser)
    @browser = browser
  end

  def each
    data_rows.map { |data| yield LanguageRow.new(header_row, data) }
  end

  def [](value)
    to_a[value]
  end

  private

  def header_row
    @browser.div(class: 'z-grid-header').table.tr
  end

  def data_rows
    @browser.div(class: 'z-grid-body').table.trs
  end
end

class LanguageRow
  def initialize(header_row, tr)
    @header_row = header_row
    @tr = tr
  end

  def primary_cell
    @tr.tds[@header_row.tds.map(&:text).index('Primary')]
  end

  def primary?
    primary_cell.radio.selected?
  end

  def set_primary(value)
    primary_cell.radio.set(value)
  end

  def language_cell
    @tr.tds[@header_row.tds.map(&:text).index('Language')]
  end

  def language
    language_cell.select.text
  end

  def set_language(value)
    language_cell.select.set(value)
  end

  def remove_cell
    # Locating the 3rd column by it's image since it doesn't have text
    @tr.tds[@header_row.tds.find_index { |td| td.image(class: 'add').exists? }]
  end

  def remove
    remove_cell.link.click
  end
end

def languages(browser)
  grid = browser.div(class: 'z-grid')
  LanguageRowCollection.new(grid)
end

您可以獲得一種更易讀的方式來獲取/設定值：

# Get/set the language of the first row (note the 0-based index)
languages(browser)[0].language
#=> "Arabic"
languages(browser)[0].set_language('Bengali')

您還可以根據行的值靈活地定位行：

# Get the primary language
languages(browser).find(&:primary?).language
#=> "Bengali"

# Remove the Arabic row
languages(browser).find { |l| l.language == 'Arabic' }.remove

HTML 示例

以下 HTML 用于上述示例。

<html>
  <body>
    <div id="d78Pt30" class="gridMaxHeight -grid">
      <div class="z-grid-header">
        <table>
          <tr>
            <td>Primary</td>
            <td>Language</td>
            <td>Add</td>
          </tr>
        </table>
      </div>
      <div class="z-grid-header-border"></div>
      <div class="z-grid-body">
        <table>
          <tr>
            <td><input type="radio"></td>
            <td><select><option selected="selected">Arabic</option><option>Bengali</option></select></td>
            <td><a href="#">Minus</a></td>
          </tr>
          <tr>
            <td><input type="radio" checked></td>
            <td><select><option>Arabic</option><option selected="selected">Bengali</option></select></td>
            <td><a href="#">Minus</a></td>
          </tr>
      </div>
    </div>
  </body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/426759.html

標籤：红宝石硒瓦提尔

上一篇：計算陣列Ruby中字串之間的距離

下一篇：決議Watir結果