動態HTML表上的jQuery循環出乎意料的結果

Question

我有一個在PHP中創建的表。該表是查詢的結果，它會生成多行。這些行內有不少不同的元素，例如下拉菜單（< select> s）複選框和文本字段。我製作了一個循環來查看jQuery中的元素並獲取值，但它並沒有返回我認爲的值。這是一個相當複雜的情況，所以我將發佈代碼和小提琴以完全說明發生了什麼，以及我期望發生的事情。

PHP

if(isset($_POST['aid'])) { 
    $aid = $_POST['aid']; 
    $projects = getProjects($db); 
    $members = getUserName($db);    
    try { 
     $project_info = $db->prepare(" 
      SELECT projects.id, 
        projects.project_name,     
        projects.pm,  
        projects.apm, 
        projects.est_start, 
        projects.est_end, 
        projects.contact,     
        projects.trips, 
        projects.tasks, 
        projects.perc_complete, 
        projects.bcwp, 
        projects.actuals, 
        projects.cpi, 
        projects.bcws, 
        projects.bac, 
        projects.comments, 
        projects.status, 
        projects.project_revenue, 
        projects.profit_margin, 
        projects.pm_perc, 
        projects.audited   
      FROM projects 
      WHERE account_id = ?       
     "); 

     $project_info->bindValue(1, $aid, PDO::PARAM_STR); 
     $project_info->execute();  

      echo "<table class='projects_contentTable'>"; 
      echo "<thead class='projects_editable_thead'>";    
      echo "<th class='content_th'>" . "Job #" . "</th>"; 
      echo "<th class='content_th'>" . "Project Name" . "</th>"; 
      echo "<th class='content_th'>" . "PM" . "</th>"; 
      echo "<th class='content_th'>" . "APM" . "</th>"; 
      echo "<th class='content_th'>" . "Est. Start" . "</th>"; 
      echo "<th class='content_th'>" . "Est. End" . "</th>"; 
      echo "<th class='content_th'>" . "Contact" . "</th>"; 
      echo "<th class='content_th'>" . "Trips" . "</th>"; 
      echo "<th class='content_th'>" . "Tasks" . "</th>"; 
      echo "<th class='content_th'>" . "% Complete" . "</th>"; 
      echo "<th class='content_th'>" . "BCWP" . "</th>"; 
      echo "<th class='content_th'>" . "Actuals" . "</th>"; 
      echo "<th class='content_th'>" . "CPI" . "</th>";   
      echo "<th class='content_th'>" . "Comments" . "</th>"; 
      echo "<th class='content_th'>" . "Status" . "</th>";  
      echo "<th class='content_th'>" . "Project Revenue" . "</th>"; 
      echo "<th class='content_th'>" . "Profit Margin" . "</th>"; 
      echo "<th class='content_th'>" . "PM%" . "</th>"; 
      echo "<th class='content_th'>" . "Audited" . "</th>"; 
      echo "</thead>"; 

      echo "<tbody class='projects_editable_tbody'>";     
      while ($row = $project_info->fetch(PDO::FETCH_ASSOC)) {    
       echo "<tr>";        
       echo "<td class='projects_editable_content_td'>" . "<a href='#'>" . $row['id'] . "</a>" . "</td>"; 
       echo "<td class='projects_editable_content_td' contenteditable='true'>" . $row['project_name'] . "</td>"; 
       echo "<td class='projects_editable_content_td'>" . 
         "<select id='table_edit_project_pm'>" . 
          "<option value=''>" . $row['pm'] . "</option>" . 
          "<option>" . "-----" . "</option>"; 
         foreach($members as $key => $value) { 
          echo "<option value='".$key."'>" . $value . "</option>";    
         } 
       echo "</select>"; 
       echo "</td>";    
       echo "<td class='projects_editable_content_td'>" . 
         "<select id='table_edit_project_apm'>" . 
          "<option value=''>" . $row['apm'] . "</option>" . 
          "<option>" . "-----" . "</option>"; 
         foreach($members as $key => $value) { 
          echo "<option value='".$key."'>" . $value . "</option>";    
         } 
       echo "</select>"; 
       echo "</td>";    
       echo "<td class='projects_editable_content_td'>" . 
        "<input type='text' id='table_edit_project_start' value='". $row['est_start'] ."'/>"; 
       echo "</td>";    
       echo "<td class='projects_editable_content_td'>" . 
        "<input type='text' id='table_edit_project_end' value='". $row['est_end'] ."'/>"; 
       echo "</td>";    
       echo "<td class='projects_editable_content_td' contenteditable='true'>" . $row['contact'] . "</td>"; 
       echo "<td class='content_td'>" . $row['trips'] . "</td>"; 
       echo "<td class='content_td'>" . $row['tasks'] . "</td>"; 
       echo "<td class='content_td'>" . $row['perc_complete'] . "</td>"; 
       echo "<td class='content_td'>" . $row['bcwp'] . "</td>"; 
       echo "<td class='content_td'>" . $row['actuals'] . "</td>"; 
       echo "<td class='content_td'>" . $row['cpi'] . "</td>";    
       echo "<td class='projects_editable_content_td' contenteditable='true'>" . $row['comments'] . "</td>"; 
       echo "<td class='projects_editable_content_td'>" . 
         "<select>" . 
          "<option value=''>" . $row['status'] . "</option>" . 
          "<option>" . "-------" . "</option>" . 
          "<option>" . "On Hold" . "</option>" . 
          "<option>" . "In Progress" . "</option>" . 
          "<option>" . "Open" . "</option>" . 
          "<option>" . "Complete" . "</option>" . 
         "</select>"; 
       echo "</td>"; 
       echo "<td class='content_td'>" . $row['project_revenue'] . "</td>"; 
       echo "<td class='content_td'>" . $row['profit_margin'] . "</td>"; 
       echo "<td class='content_td'>" . $row['pm_perc'] . "</td>"; 
       echo "<td class='projects_editable_content_td'>";         
        if ($row['audited'] == 'true') { 
         echo "<input type='checkbox' checked='checked'/>"; 
        } else { 
         echo "<input type='checkbox'/>"; 
        } 
       echo "</td>";    
       echo "</tr>";    
      } 
      echo "</tbody>";  
      echo "</table>";     
    } catch(PDOException $e) { 
     die($e->getMessage()); 
    } 
} else {  
    echo 'could not load projects table'; 
} 

jQuery的

$('.projects_editable_tbody tr').each(function() { 
     $('.projects_editable_content_td:not(:has(select)),option:selected').each(function() { 
      saveEdits.push($(this).text()); 
     }); 
    }); 

    $.each(saveEdits, function(index, value) { 
     alert(index + ': ' + value); 
    }); 

OK端壁，所以這裏是http://jsfiddle.net/U3nna/14/

拉小提琴裏面其實我列出值擺弄我我期待着，你所要做的就是點擊保存按鈕，看看什麼是交流一定會發生。

對於那些不想使用小提琴的人，或者可能不能在這裏進行簡單的總結。

我需要循環遍歷表並遍歷每個錶行。在每個表格行內，我需要< td>的文本值與類「.projects_editable_content_td」。每個值都將被放入一個數組中。 但是某些值未被存儲，並且似乎此循環在表上執行了額外的迭代。所以有時候我會期待9或18的值，而我最終會得到27或36，而我越是跑得越差。

我在絞盡腦汁，但我似乎無法弄清楚爲什麼它不會提取這些元素中的一些文本值。如果有人有時間借我一把，我會非常感激。

Answer 1

更改它以便您爲每個選項提供正確的選項值（即，如果您希望Jane Doe輸出Jane Doe，那麼只需將它用於option中的值和內容）。

然後您需要添加其他input秒的第三種可能性，所以我可能只是重新安排你要對此的方式：

$('td', this).each(function() { 
    var $input = $("select, input", this); 
    if($input.length) { 
     saveEdits.push($input.val()); 
    } 
    else saveEdits.push($(this).text()); 
}); 

請注意，我也改變了選擇。看起來你在不需要它們的地方使用很多類。如果你確實需要使用這麼多的類，也許可以試着讓它們稍微好一些（例如，使用.projects-editable-content，例如，使用沒有下劃線的虛線，並且不要使它們超過它們所需的長度）。

Answer 2

的問題是，你只得到$(this).text()它忽略了輸入（文/複選框）值 另外一兩件事我注意到你已經分配了相同ID的人數超過一個元素，ID應該是對HTML元素的獨特table_edit_project_start，table_edit_project_end

試試這個

var saveEdits = []; 
$('#save').click(function() { 
    $('.projects_editable_tbody tr').each(function() { 
     $('.projects_editable_content_td:not(:has(select))>input') 
      .each(function() { 
       saveEdits.push($(this).val()); 
      }); 

     $('.projects_editable_tbody tr > .projects_editable_content_td:not(:has(select))') 
      .each(function() { 
       saveEdits.push($(this).text()); 
      }); 

    }); 
    $.each(saveEdits, function(index, value) { 
     alert(index + ': ' + value); 
    }); 
}); 

重複的值，你可以使用選擇像:eq(index),:gt(index)個這樣的循環，將取回當前TR的領域

var saveEdits = []; 
$('#save').click(function() { 
    $('.projects_editable_tbody tr').each(function(i) { 
     $('.projects_editable_tbody tr:eq('+i+') > .projects_editable_content_td:not(:has(select))>input') 
      .each(function() { 
       saveEdits.push($(this).val()); 
      }); 

     $('.projects_editable_tbody tr:eq('+i+') >.projects_editable_content_td:not(:has(select))') 
      .each(function() { 
       saveEdits.push($(this).text()); 
      }); 

    }); 
    $.each(saveEdits, function(index, value) { 
     alert(index + ': ' + value); 
    }); 
}); 

Fiddle