2017-01-30 5 views
0
<body> 
    <div id="contacts"> 
    <table> 
     <thead> 
     <tr> 
      <th class="sort" data-sort="name">Name</th> 
      <th class="sort" data-sort="age">Age</th> 
      <th class="sort" data-sort="city">City</th> 
      <th colspan="2"> 
      <input type="text" class="search" placeholder="Search contact" /> 
      </th> 
     </tr> 
     </thead> 
     <tbody class="list"> 
     <tr> 
      <td class="id" style="display:none;">1</td> 
      <td class="name">Jonny</td> 
      <td class="age">27</td> 
      <td class="city">Stockholm</td> 
      <td class="edit"><button class="edit-item-btn">Edit</button></td> 
      <td class="remove"><button class="remove-item-btn">Remove</button></td> 
     </tr> 
     <tr> 
      <td class="id" style="display:none;">2</td> 
      <td class="name">Jonas</td> 
      <td class="age">-132</td> 
      <td class="city">Berlin</td> 
      <td class="edit"><button class="edit-item-btn">Edit</button></td> 
      <td class="remove"><button class="remove-item-btn">Remove</button></td> 
     </tr> 
     <tr> 
      <td class="id" style="display:none;">3</td> 
      <td class="name">Gustaf</td> 
      <td class="age">-23</td> 
      <td class="city">Sundsvall</td> 
      <td class="edit"><button class="edit-item-btn">Edit</button></td> 
      <td class="remove"><button class="remove-item-btn">Remove</button></td> 
     </tr> 
     <tr> 
      <td class="id" style="display:none;">4</td> 
      <td class="name">Fredrik</td> 
      <td class="age">26</td> 
      <td class="city">Goteborg</td> 
      <td class="edit"><button class="edit-item-btn">Edit</button></td> 
      <td class="remove"><button class="remove-item-btn">Remove</button></td> 
     </tr> 
     </tbody> 
    </table> 
    </div> 

    <button id="submitForm">submit</button> 
</body> 

jsspeichern nur einige Daten aus der Tabelle in ein Objekt

function SendData(){ 

    var options = { 
     valueNames: [ 'id', 'name', 'age', 'city' ] 
    }; 

    var tableArray =[]; 

    $('#contacts tr').each(function(index, tr) { 
     var lines = $('td', tr).map(function(index, td) { 
      return $(td).text(); 
     }); 
     // Here lines will contain an array of all td values for the current row: 
     // like ['value 1', 'value 2', 'value 3'] 
     tableArray.push(lines); 
    }); 

    console.log(tableArray); 
} 

Ich habe einige Daten in meiner Tabelle enthalten, gibt es „id, Name, Alter, Stadt, bearbeiten und entfernen“, aber ich nur müssen die "id, name, alter, stadt" in meinem objekt gespeichert werden, wie mache ich das? und ich brauche auch nicht die thead an der spitze zu speichern.

Also muss ich Klassenliste "ID, Name, Alter, Stadt" zu meinen Optionen Objekt speichern, wie mache ich das?

Antwort

0

Ich denke, Sie möchten nur bestimmte "td" -Tags aus dem "tr" auswählen. Damit diese Auswahl getroffen wird, können Sie eine zusätzliche Klasse nur für diese "td" wie folgt hinzufügen.

<tr> 
     <td class="id myData" style="display:none;">1</td> 
     <td class="name myData">Jonny</td> 
     <td class="age myData">27</td> 
     <td class="city myData">Stockholm</td> 
     <td class="edit"><button class="edit-item-btn">Edit</button></td> 
     <td class="remove"><button class="remove-item-btn">Remove</button></td> 
</tr> 

Dann können Sie Sie Selektor ändern Klasse „myData“ auch zu den Kriterien gehören. Dies wird "td" nur mit "myData" in ihrem Klassenattribut auswählen, was Ihnen nur Daten gibt, die Sie brauchen.

Da Sie die Auswahl nur „td“ von „tr“ so „th“ nicht in dieser Auswahl in Betracht gezogen werden, und Sie werden Daten erhalten nur von dem „td“, die Klasse „myData“ hat.

Dies sollte Ihr Problem lösen.

Verwandte Themen