Wie kann ich dynamische Tabelleneingaben erhalten, um in Array zu gelangen?

Ich habe es bereits funktioniert für die Eingänge, jetzt denke ich, es sind nur dumme Fehler, die ich nicht bemerkt habe.Wie kann ich dynamische Tabelleneingaben erhalten, um in Array zu gelangen?

My Script sieht wie folgt aus:

<script type="text/javascript"> 
    $(document).ready(function() { 

     $('#clicker').on('click', function (e) { 
      var tableToObj = function (table) { 
       var trs = table.rows, 
    trl = trs.length, 
    i = 0, 
    j = 0, 
    keys = [], 
    obj, ret = []; 




       for (; i < trl; i++) { 
        if (i == 0) { 

         for (; j < trs[i].children.length; j++) { 

          var sel = $(trs[i].children[j]).find("select"); 
          if (sel.length == 0) { 
           keys.push(trs[i].children[j].innerHTML); 
          } else { 
           keys.push(sel.find('option:selected').val()); //all select works perfectly 
          } 

          var input = $(trs[i].children[j]).find("input"); //here I'm trying to find the input. This is where it stops working 
          if (input.length == 0) { 
           keys.push(trs[i].children[j].innerHTML); 
          } else { 
           keys.push(trs[i].childen[j].innerHTML); 
          } 

         } 

        } else { 

         obj = {}; 
         for (j = 0; j < trs[i].children.length; j++) { //this works 
          var sel = $(trs[i].children[j]).find("select"); 
          if (sel.length == 0) { 
           obj[keys[j]] = trs[i].children[j].innerHTML; 
          } else { 
           obj[keys[j]] = sel.find('option:selected').val(); 
          } 

          var input = trs.getElementsByTagName("input"); //below does not work 
          if (input.length == 0) { 
           obj[keys[j]] = trs[i].children[j].innerHTML; 
          } else { 
           obj[keys[j]] = input.find('text').val(); 
          } 



          /* 
          for (j < input.length; j++) { 
          data.push(input[j].id); 
          } 
          */ 
         } 





         ret.push(obj); 
        } 

       } 

       return ret; 
      }; 

      document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable'))); 


     }); 


    });

Hier ist die weniger relevanten HTML: (enthalten nur um zu sehen, wo ich bin ziehen)

<table id="myTable"> 
    <thead> 
     <tr> 
     <th>FirstColumn</th> 
     <th>SecondColumn</th> 
     <th>ThirdColumn</th> 
     </tr> 
    </thead> 
    <tbody> 
     <tr> 
     <td> 
      <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td> 
     <td>1</td> 
     <td> 
      <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td> 
     </tr> 
     <tr> 
     <td></td> 
     <td> 
     </td> 
     <td> 
      <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option><option value="tr4">tr4</option></select></td> 
     </tr> 
     <tr> 
     <td><input type="text" /></td> 
     <td><input type="text" /> 
     </td> 
     <td> 
      <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td> 
     </tr> 
     <tr> 
     <td> 
     <input type="text" /></td> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
     </tr> 
     <tr> 
     <td><input type="text" /></td> 
     <td><input type="text" /></td> 
     <td> 
      <select><option value="tr1">tr1</option><option value="tr2">tr2</option><option value="tr3">tr3</option></select></td> 
     </tr> 
    </tbody> 
</table>

EDIT: Ich habe seit trs [i ] in wo es sein sollte

Quelle

2016-05-12 Stacker

Sie verwenden eine Menge 'input's und' select's, haben Sie als Eltern ein 'form' wurde? Wenn ja, warum verwenden Sie nicht den Standard-JQuery-Serializer dafür? wie '$ ('myForm'). serialize()' –

Was ist '# clicker' Element hier? –

Warum verwenden Sie '.getElementsByTagName ('td')' nicht, durchlaufen Sie diese und referenzieren Sie Ihre Eingaben mit '.children [0]', da sie alle Ihre ersten Elemente innerhalb ihrer jeweiligen Elternelemente sind (was auch td ist) ? Dann könnten Sie '.tagName' der untergeordneten Elemente verwenden, um zu bestimmen, welche Unterroutine auszuführen ist, um die Daten zu extrahieren. Von da an ist es trivial, herauszufinden, wie es funktioniert, unabhängig davon, wo sich das Kindelement befindet. Sie können einfach einen anderen '.getElementsByTagName ('*')' ausführen und diesen mit einer switch-Anweisung auf dem '.tagName' durchlaufen. –

Sie haben versucht, getElementByTagName auf Array von Elementen zu verwenden, und daher sollten Sie index in var input = trs[i].getElementsByTagName("input"); verwendet haben stattdessen hast du var input = trs.getElementsByTagName("input");

a side note - Bitte nicht javascript und jquery kombinieren kann. Wenn Sie ein Plug-in installiert haben, verwenden Sie bitte auch dessen Funktionen.

$(document).ready(function() { 
 
    $('#clicker').on('click', function(e) { 
 
     var tableToObj = function(table) { 
 
      var trs = table.rows, 
 
       trl = trs.length, 
 
       i = 0, 
 
       j = 0, 
 
       keys = [], 
 
       obj, ret = []; 
 
      for (; i < trl; i++) { 
 
       if (i == 0) { 
 
        for (; j < trs[i].children.length; j++) { 
 
         var sel = $(trs[i].children[j]).find("select"); 
 
         if (sel.length == 0) { 
 
keys.push(trs[i].children[j].innerHTML); 
 
         } else { 
 
keys.push(sel.find('option:selected').val()); //all select works perfectly 
 
         } 
 
         var input = $(trs[i].children[j]).find("input"); //here I'm trying to find the input. This is where it stops working 
 
         if (input.length == 0) { 
 
keys.push(trs[i].children[j].innerHTML); 
 
         } else { 
 
keys.push(trs[i].childen[j].innerHTML); 
 
         } 
 
        } 
 

 
       } else { 
 
        obj = {}; 
 
        for (j = 0; j < trs[i].children.length; j++) { //this works 
 
         var sel = $(trs[i].children[j]).find("select"); 
 
         if (sel.length == 0) { 
 
          obj[keys[j]] = trs[i].children[j].innerHTML; 
 
         } else { 
 
          obj[keys[j]] = sel.find('option:selected').val(); 
 
         } 
 
         var input = trs[i].getElementsByTagName("input"); //below does not work 
 
         if (input.length == 0) { 
 
          obj[keys[j]] = trs[i].children[j].innerHTML; 
 
         } else { 
 
          obj[keys[j]] = input.value; 
 
         } 
 
        } 
 
        ret.push(obj); 
 
       } 
 

 
      } 
 
      return ret; 
 
     }; 
 

 
     document.getElementById('r').innerHTML = JSON.stringify(tableToObj(document.getElementById('myTable'))); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<table id="myTable"> 
 
    <thead> 
 
     <tr> 
 
      <th>FirstColumn</th> 
 
      <th>SecondColumn</th> 
 
      <th>ThirdColumn</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <tr> 
 
      <td> 
 
       <select> 
 
        <option value="tr1">tr1</option> 
 
        <option value="tr2">tr2</option> 
 
        <option value="tr3">tr3</option> 
 
        <option value="tr4">tr4</option> 
 
       </select> 
 
      </td> 
 
      <td>1</td> 
 
      <td> 
 
       <select> 
 
        <option value="tr1">tr1</option> 
 
        <option value="tr2">tr2</option> 
 
        <option value="tr3">tr3</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td></td> 
 
      <td> 
 
      </td> 
 
      <td> 
 
       <select> 
 
        <option value="tr1">tr1</option> 
 
        <option value="tr2">tr2</option> 
 
        <option value="tr3">tr3</option> 
 
        <option value="tr4">tr4</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <select> 
 
        <option value="tr1">tr1</option> 
 
        <option value="tr2">tr2</option> 
 
        <option value="tr3">tr3</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
     </tr> 
 
     <tr> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <input type="text" /> 
 
      </td> 
 
      <td> 
 
       <select> 
 
        <option value="tr1">tr1</option> 
 
        <option value="tr2">tr2</option> 
 
        <option value="tr3">tr3</option> 
 
       </select> 
 
      </td> 
 
     </tr> 
 
    </tbody> 
 
</table> 
 
<input type="button" id="clicker" value="click" /> 
 
<div id="r"> 
 

 
</div>

Quelle

2016-05-12 14:12:11

Danke, ich habe es damit aktualisiert, aber es funktioniert immer noch nicht. Müssen andere Probleme auch sein – Stacker

yeah Ich bekomme immer undefined ist keine Funktion nirgends Eingabe wird erwähnt – Stacker

Ich bekomme Folgendes in der Ausgabe: [{"FirstColumn ":" 1 "," SecondColumn ":" \ n "}, {" FirstColumn ":" \ n "," SecondColumn ":" \ n "}, {}, {}, {}], so dass es immer noch nicht die Eingabe – Stacker

Wie kann ich dynamische Tabelleneingaben erhalten, um in Array zu gelangen?

Antwort

Verwandte Themen