CODEWITHSUNDEEP
javascripthtmlrange
Lizza
Lizza

Reputation: 2819

Is it possible to access one column of an HTML table as a single HTML element?

For purposes that are very central to my apps purpose, I display text content in an HTML table in a UIWebView. Here is an example of what that setup looks like:

<table width = "100%">
     <tbody>
          <tr>//Row 1
               <td>
                    Here is the text of the first row of the table, first cell in the row
               </td>
               <td>
                    Here is the text of the first row of the table, second cell in the row
               </td>
          </tr>
          <tr>//Row 2
               <td>
                    Here is the text of the second row of the table, first cell in the row
               </td>
               <td>
                    Here is the text of the second row of the table, second cell in the row
               </td>
          </tr>
     </tbody>
</table>

If I select some of the text in one of these rows, it isn't very hard to get the parent element, and get the range of that selection relative to that of the entire sentence in that row. So for example, if I select the text "Here" of the second row, the range of that text relative to that line is 0-3.

I am wondering if it is possible to combine the rows (on a column basis) of a table so that the length of the element wasn't just the sentence in the row I selected, but also included all other rows.

In other words, I need to get the selected text range (start, end) relative to all of the rows in the table, not just the row of the selected text.

For example, if we keep the same word selected, but look at it in context of the contents of the entire table, the range wouldn't be 0-3 anymore, it would be something like 59-63 because we are also including the row above it and it's contents. Effectively treating the entire column as on HTML element.

Is that possible?

Upvotes: 0

Views: 1486

Answers (1)

Matt Pileggi
Matt Pileggi

Reputation: 7196

You sorta can by using jQuery's ability to string all calls together

 $('tr td:first-of-type').text()

http://jsfiddle.net/gNvnp/1/

And with no jQuery (in modern browsers)

// no jquery
var combineCols = function(selector) {
  var cols = document.querySelectorAll(selector);
  var len = cols.length;
  var str = '';
  while (len--) {
     str = cols[len].innerText + ' ' + str;   
  }
  return str;
}

http://jsfiddle.net/gNvnp/3/

Upvotes: 1

Related Questions