Grab单元格值使用jquery指定一个HTML表

Question

I have a large string from a file. Csv file that I converted into a textarea. It is separated by "," (comma). eg part of string .

<textarea>rank,place,population,lat,lon 1,New York city,8175133,40.71455,-74.007124 2,Los Angeles city,3792621,34.05349,-118.245323 3,Chicago city,2695598,45.37399,-92.888759 4,Houston city,2099451,41.337462,-75.733627 5,Philadelphia city,1526006,37.15477,-94.486114 6,Phoenix city,1445632,32.46764,-85.000823 7,San Antonio city,1327407,37.706576,-122.440612 8,San Diego city,1307402,37.707815,-122.466624 9,Dallas city,1197816,40.636,-91.168309 10,San Jose city,945942,41.209716,-112.003047 11,Jacksonville city,821784,30.2887,-81.391794 12,Indianapolis city (balance),820445,39.766911,-86.149963 13,Austin city,790390,28.973405,-95.961284 14,San Francisco city,805235,28.371795,-82.187909 15,Columbus city,787033,41.258735,-91.374424 16,Fort Worth city,741206,38.0016,-89.066334 17,Charlotte city,731424,39.09931,-76.817799 18,Detroit city,713777,42.408871,-83.002647 19,El Paso city,649121,41.645415,-91.599794 20,Memphis city,646889,35.149681,-90.04892 21,Boston city,617594,41.202364,-112.032315 22,Seattle city,608660,45.520615,-123.873929 23,Denver city,600158,32.96438,-102.829919 24,Baltimore city,620961,39.284664,-76.62022 25,Washington city,601723,38.899101,-77.028999 26,Nashville-Davidson metropolitan government (balance),601222,45.304048,-121.756365 27,Louisville/Jefferson County metro government (balance),597337,45.304048,-121.756365 28,Milwaukee city,594833,43.041809,-87.906837 29,Portland city,583776,45.52186,-123.882594 30,Oklahoma City city,579999,39.05514,-96.816104 31,Las Vegas city,583756,40.4879,-85.609999 32,Albuquerque city,545852,35.084179,-106.648643 33,Tucson city,520116,41.644727,-91.601947 34,Fresno city,494665,38.645741,-77.321863 35,Sacramento city,466488,38.915291,-121.594651 36,Long Beach city,462257,29.748022,-94.827603 37,Kansas City city,459787,39.016682,-96.864303 38,Mesa city,439041,30.686452,-97.700842 39,Virginia Beach city,437994,36.767408,-76.047707 40,Atlanta city,420003,37.691375,-122.454979 41,Colorado Springs city,416427,40.17676,-75.547839 42,Raleigh city,403892,41.132609,-73.977405 43,Omaha city,408958,41.260689,-95.94059 44,Miami city,399457,41.63636,-91.501889 45,Tulsa city,391906,39.095215,-121.613384 46,Oakland city,390724,38.334108,-87.345139 47,Cleveland city,396815,36.640475,-82.582569 48,Minneapolis city,382578,44.979031,-93.264931 49,Wichita city,382368,37.686981,-97.335579 50,Arlington city,365438,41.29525,-88.25278</textarea>

Knowing that created a framework that leaves my data in a table format. The code is this:

var data = $("textarea").val();
var lines = data.split("\n"),
    output = [],
    i;
for (i = 0; i < lines.length; i++)
    output.push("<tr><td>" + lines[i].slice(0,-1).split(",").join("</td><td>") + "</td></tr>");
output = "<table>" + output.join("") + "</table>";
 $('#fileDisplayArea').text(output);

Realize that I'm adding the structure of tables in .text( ), Why if I put .html() it breaks my browser for that string is gigantic! Thus the data are well inside the div:

<table><tr><td>rank</td><td>place</td><td>population</td><td>lat</td><td>lo</td></tr><tr><td>1</td><td>New York city</td><td>8175133</td><td>40.71455</td><td>-74.00712</td></tr><tr><td>2</td><td>Los Angeles city</td><td>3792621</td><td>34.05349</td><td>-118.24532</td></tr><tr><td>3</td><td>Chicago city</td><td>2695598</td><td>45.37399</td><td>-92.88875</td></tr><tr><td>4</td><td>Houston city</td><td>2099451</td><td>41.337462</td><td>-75.73362</td></tr><tr><td>5</td><td>Philadelphia city</td><td>1526006</td><td>37.15477</td><td>-94.48611</td></tr><tr><td>6</td><td>Phoenix city</td><td>1445632</td><td>32.46764</td><td>-85.00082</td></tr><tr><td>7</td><td>San Antonio city</td><td>1327407</td><td>37.706576</td><td>-122.44061</td></tr><tr><td>8</td><td>San Diego city</td><td>1307402</td><td>37.707815</td><td>-122.46662</td></tr><tr><td>9</td><td>Dallas city</td><td>1197816</td><td>40.636</td><td>-91.16830</td></tr><tr><td>10</td><td>San Jose city</td><td>945942</td><td>41.209716</td><td>-112.00304</td></tr><tr><td>11</td><td>Jacksonville city</td><td>821784</td><td>30.2887</td><td>-81.39179</td></tr><tr><td>12</td><td>Indianapolis city (balance)</td><td>820445</td><td>39.766911</td><td>-86.14996</td></tr><tr><td>13</td><td>Austin city</td><td>790390</td><td>28.973405</td><td>-95.96128</td></tr><tr><td>14</td><td>San Francisco city</td><td>805235</td><td>28.371795</td><td>-82.18790</td></tr><tr><td>15</td><td>Columbus city</td><td>787033</td><td>41.258735</td><td>-91.37442</td></tr><tr><td>16</td><td>Fort Worth city</td><td>741206</td><td>38.0016</td><td>-89.06633</td></tr><tr><td>17</td><td>Charlotte city</td><td>731424</td><td>39.09931</td><td>-76.81779</td></tr><tr><td>18</td><td>Detroit city</td><td>713777</td><td>42.408871</td><td>-83.00264</td></tr><tr><td>19</td><td>El Paso city</td><td>649121</td><td>41.645415</td><td>-91.59979</td></tr><tr><td>20</td><td>Memphis city</td><td>646889</td><td>35.149681</td><td>-90.0489</td></tr><tr><td>21</td><td>Boston city</td><td>617594</td><td>41.202364</td><td>-112.03231</td></tr><tr><td>22</td><td>Seattle city</td><td>608660</td><td>45.520615</td><td>-123.87392</td></tr><tr><td>23</td><td>Denver city</td><td>600158</td><td>32.96438</td><td>-102.82991</td></tr><tr><td>24</td><td>Baltimore city</td><td>620961</td><td>39.284664</td><td>-76.6202</td></tr><tr><td>25</td><td>Washington city</td><td>601723</td><td>38.899101</td><td>-77.02899</td></tr><tr><td>26</td><td>Nashville-Davidson metropolitan government (balance)</td><td>601222</td><td>45.304048</td><td>-121.75636</td></tr><tr><td>27</td><td>Louisville/Jefferson County metro government (balance)</td><td>597337</td><td>45.304048</td><td>-121.75636</td></tr><tr><td>28</td><td>Milwaukee city</td><td>594833</td><td>43.041809</td><td>-87.90683</td></tr><tr><td>29</td><td>Portland city</td><td>583776</td><td>45.52186</td><td>-123.88259</td></tr><tr><td>30</td><td>Oklahoma City city</td><td>579999</td><td>39.05514</td><td>-96.81610</td></tr><tr><td>31</td><td>Las Vegas city</td><td>583756</td><td>40.4879</td><td>-85.60999</td></tr><tr><td>32</td><td>Albuquerque city</td><td>545852</td><td>35.084179</td><td>-106.64864</td></tr><tr><td>33</td><td>Tucson city</td><td>520116</td><td>41.644727</td><td>-91.60194</td></tr><tr><td>34</td><td>Fresno city</td><td>494665</td><td>38.645741</td><td>-77.32186</td></tr><tr><td>35</td><td>Sacramento city</td><td>466488</td><td>38.915291</td><td>-121.59465</td></tr><tr><td>36</td><td>Long Beach city</td><td>462257</td><td>29.748022</td><td>-94.82760</td></tr><tr><td>37</td><td>Kansas City city</td><td>459787</td><td>39.016682</td><td>-96.86430</td></tr><tr><td>38</td><td>Mesa city</td><td>439041</td><td>30.686452</td><td>-97.70084</td></tr><tr><td>39</td><td>Virginia Beach city</td><td>437994</td><td>36.767408</td><td>-76.04770</td></tr><tr><td>40</td><td>Atlanta city</td><td>420003</td><td>37.691375</td><td>-122.45497</td></tr><tr><td>41</td><td>Colorado Springs city</td><td>416427</td><td>40.17676</td><td>-75.54783</td></tr><tr><td>42</td><td>Raleigh city</td><td>403892</td><td>41.132609</td><td>-73.97740</td></tr><tr><td>43</td><td>Omaha city</td><td>408958</td><td>41.260689</td><td>-95.9405</td></tr><tr><td>44</td><td>Miami city</td><td>399457</td><td>41.63636</td><td>-91.50188</td></tr><tr><td>45</td><td>Tulsa city</td><td>391906</td><td>39.095215</td><td>-121.61338</td></tr><tr><td>46</td><td>Oakland city</td><td>390724</td><td>38.334108</td><td>-87.34513</td></tr><tr><td>47</td><td>Cleveland city</td><td>396815</td><td>36.640475</td><td>-82.58256</td></tr><tr><td>48</td><td>Minneapolis city</td><td>382578</td><td>44.979031</td><td>-93.26493</td></tr><tr><td>49</td><td>Wichita city</td><td>382368</td><td>37.686981</td><td>-97.33557</td></tr><tr><td>50</td><td>Arlington city</td><td>365438</td><td>41.29525</td><td>-88.2527</td></tr></table>

I need to get the contents of *<tr>* containing his first *<td>* equal to "2" in the third <td> an alert . In this case appear the number " 3792621 " in the alert.

Need to do this in. Text ()!

http://jsfiddle.net/JoaoFelipePego/frvQ2/136/ Thanks!

Answer 1

Your CSV data is malformed. The separator between lines is a space " " character, not a newline "\\n" character. Therefore, there is no way for a computer to know when your next data point starts. You will have to either wrap all cities into quotation marks so that the spaces don't register as indicators for a new datapoint. For example

instead of

New York city

Do this:

"New York city"

As a result, your code data.split("\\r") doesn't do anything, because there is no "\\r" to split with. However, it works when you do data.split(" ") .

Since you have 50 expected ranked cities, running the above command(s) should give me an array of 51 objects (50 cities + 1 header). However, running data.split("\\r") does nothing. Running data.split(" ") gives me 121 results!

Check the fiddle with my updated code.

FINAL VERSION: http://jsfiddle.net/frvQ2/139/

Answer 2

When you have a html string, say, data, you manipulate it without adding it to the DOM as follows:

var rows = $(data).find('tr').filter(function(){ 
    return $(this).children('td').eq(2).text() == 2;
});

This should return rows which have the content 2 in the third cell.

Perhaps the issue of a large string causing issues with .html() could be resolved by taking this approach:

var table = $('<table/>');
for (i = 0; i < lines.length; i++)
    table.append("<tr><td>" + lines[i].slice(0,-1).split(",").join("</td><td>") + "</td></tr>");
$('#fileDisplayArea').html(table);