2017-04-22 1 views
0

Ich lerne jQuery und kam auf das Problem der Speicherung von HTML-Tabellendaten zu einem 2D-Array. Anstatt verschachtelte Schleifen zu verwenden, suchte ich nach jQuery-Funktionen, die es mir ermöglichen würden, dasselbe zu tun. Ich fand this method, die die Arbeit zu erledigen scheint.Selektive Speicherung von Tabellendaten in 2D-Array

var tRows = $('tr').map(function() { 
    return [$(this).find('td').map(function() { 
    return $(this).text() 
    }).get()] 
}).get() 

console.log(tRows) 

I'd like to know, how I can use a condition, in the given code, to check if the first td of a tr is empty or not (or some other condition in general) and thus not add that row to the final array.

EDIT:

die Kommentare und Gebäude auf this fiddle Lesen, ich habe jetzt

var tRows = $('tr').map(function() { 
    var arr = $(this).find('td').map(function() { 
    return $(this).text() 
    }).get(); 

    if (arr[0].length) return[arr]; 
}).get() 

Das funktioniert etwas, aber ich hatte gehofft, dass die Bedingung in der inneren Karte überprüfen und gibt einen NULL-Wert anstelle des gesamten Arrays zurück. Von der discussion here scheint es, dass es nicht möglich ist, den inneren Kartenaufruf in der Mitte abzubrechen, und es wird das gesamte Array zurückgeben. Scheint, dass Loops am Ende für diesen Job besser sein könnten, oder habe ich etwas verpasst?

+0

'Karte()' Parameter nimmt, die Sie Index der aktuellen Element gibt, so dass Sie das und überprüfen Textlänge wie diese https verwenden können: // jsfiddle .net/Lg0wyt9u/1816/ –

+0

@NenadVracar Oh, eigentlich wollte ich nicht die gesamte Zeile, sondern das Array zum 2d Array hinzufügen, anstatt der Zelle. Aber ich werde versuchen, auf die Geige zu bauen, um das zu erreichen. –

+0

'return return $ (this) .text() || undefined – Thomas

Antwort

0

den Code Angenommen, Sie für Sie auf dem Laufenden arbeitet ...

Wenn Sie die .text des ersten td nicht leer jeder Zeile wollen, kann die Verwendung einer Kombination von CSS-Selektoren die Lösung sein.

:first-child
:not
:empty

EDIT
Okay ... ich es ein wenig verbessert.
Sieht so aus, als könnten einige Leerzeichen in einem leeren td ... Also habe ich eine regex verwendet, um es zu testen.

Hier sind die neuen Dinge, die ich verwendet:
:first
.test() JavaScript-Methode
.trim() JavaScript-Methode

Und die CodePen, wo ich es tryed.

$(document).ready(function(){ 
    console.clear(); 
    console.log("loading..."); 

    var tRows = $('tr').map(function() { 
    return [$(this).find('td:first').map(function() { 
     var pattern = /^\s+$/; 
     if($(this).text()!="" && !pattern.test($(this).text())){ 
     return $(this).text().trim(); 
     } 
    }).get()] 
    }).get() 

    console.log(tRows) 
}); 

Diese Rückkehr: [["blah1],[],[blah7]] im CodePen ...
Wenn Sie nicht wollen, die leer in der Mitte:

Zweite CodePen

$(document).ready(function(){ 
    console.clear(); 
    console.log("loading..."); 

    var tRows = $('tr').map(function() { 
    var arr = [$(this).find('td:first').map(function() { 
     var pattern = /^\s+$/; 
     if($(this).text()!="" && !pattern.test($(this).text())){ 
     return $(this).text().trim(); 
     } 
    }).get()]; 

    if(arr[0]!=""){ 
     return arr; 
    } 
    }).get() 

    console.log(tRows) 
}); 

Diese Rückkehr: [["blah1],[blah7]]





2. EDIT
Dies kann auch auf diese Weise erreicht werden.
(es bedeutet nur eine Schleife und der Code ist einfacher zu lesen).3.
Siehe CodePen

$(document).ready(function(){ 
    console.clear(); 
    console.log("loading..."); 

    var arr=[]; 
    var counter=0; 

    $('tr').each(function() { 
    var thisTDtext = [$(this).find("td").first().text().trim()]; 

    if(thisTDtext!=""){ 
     arr[counter] = thisTDtext; 
     counter++; 
    } 
    }); 

    console.log(JSON.stringify(arr)); 

}); 

zurückkehren Dies auch: [["blah1],[blah7]]

+0

Würfe: Uncaught Error: Syntaxfehler, unerkannter Ausdruck: tr: first-child (td: nicht (: leer())) –

+0

Ok ... Moment, ich werde es in CodePen versuchen. –

+0

Ich habe es ein wenig verbessert ... Probieren Sie es aus! –