如何計算動態生成的html表中的行數？

Question

任何人都可以請幫我算一個使用JavaScript的動態生成HTML表格的行數嗎？如果任何人都可以在此幫助讓我知道，我已經試圖動態生成行的數據插入到數據庫

我JS代碼：

<SCRIPT language="javascript"> 
var count=1; 
    function addRow(tableID) { 
     /*if(empty(index)) 
     { 
     var index = 0; 

     } 
     else 
     { 
     index++; 
     alert(index); 
     document.getElementById('cat').name = 'cat'+index; 
     }*/ 

     var table = document.getElementById(tableID); 

     var rowCount = table.rows.length; 
     var count = rowCount-1; 
     alert(rowCount); 

     var selectOFCat = $("#"+tableID).find('tr:eq(0)').find('.cat').get(0); 
     var row = table.insertRow(rowCount); 

     var colCount = table.rows[0].cells.length; 

     for(var i=0; i<colCount; i++) { 

      var newcell = row.insertCell(i); 

      newcell.innerHTML = table.rows[0].cells[i].innerHTML; 
      //alert(newcell.childNodes); 
      switch(newcell.childNodes[0].type) { 
       case "text": 
         newcell.childNodes[0].value = ""; 
         break; 
       case "checkbox": 
         newcell.childNodes[0].checked = false; 
         break; 
       case "select-one": 
         newcell.childNodes[0].selectedIndex = 0; 
         break; 
      } 
     } 

     $(table).find("tr:eq("+rowCount+")").find('.cat').attr("id","cat"+rowCount); 

    } 

    function deleteRow(tableID) { 
     try { 
     var table = document.getElementById(tableID); 
     var rowCount = table.rows.length; 

     for(var i=0; i<rowCount; i++) { 
      var row = table.rows[i]; 
      var chkbox = row.cells[0].childNodes[0]; 
      if(null != chkbox && true == chkbox.checked) { 
       if(rowCount <= 1) { 
        alert("Cannot delete all the rows."); 
        break; 
       } 
       table.deleteRow(i); 
       rowCount--; 
       i--; 
      } 


     } 
     }catch(e) { 
      alert(e); 
     } 
    } 


    function changeSelection(value){ 

    var length = document.getElementById("ind").options.length; 

    if(value == "All"){ 
    for(var i = 1;i<length;i++) 
    document.getElementById("ind").options[i].selected = "selected"; 

    document.getElementById("ind").options[0].selected = ""; 
    } 

}

</SCRIPT> 

我的PHP代碼：

     <table width="100%"> 
          <tr> 
           <td><h5>Add your Products</h5>&nbsp;&nbsp;&nbsp; 
           </td> 
          </tr> 

          <tr><td> 
          <INPUT id="add_row" type="button" value="Add Row" onclick="addRow('dataTable')" class="btn btn-danger" name="add_row" /> 

<INPUT type="button" value="Delete Row" onclick="deleteRow('dataTable')" class="btn btn-danger" /> 
<tr> 
<td bgcolor="red"> 
<TABLE width="100%" border="1" cellpadding="0" cellspacing="2" > 

          <tr><td width="2%">::</td><td style="width:213px;padding:5px;">Type</td><td class="srcinfo_head">Product</td><td class="srcinfo_head">Specification</td><td class="srcinfo_head_op">Option</td><td class="srcinfo_head_src">Source</td><td class="srcinfo_head">Frequency</td><td class="srcinfo_head">Quantity</td><td class="srcinfo_head">Unit</td> 
          </tr> 
</table> 
</td> 
</tr> 
<tr><td> 
<TABLE id="dataTable" width="100%" border="1" cellpadding="0" cellspacing="2" style="border:#cccccc; border-width:3px; border-style:solid"> 

    <TR valign="top"> 
     <TD width="2%"><INPUT type="checkbox" name="chk" style="margin:5px;"/></TD> 
     <TD class="srcinfo"> 
    <select id="cat" class="cat" name="data[cat][]" size="10px" class="srcinfo_type" style ="height:77px !important;"> 
    <option value="">--Select a Category-- 
    <?= $options ?> 
</select> 
     </TD> 

     <TD width="15%"><?php echo tep_draw_input_field('data[productname][]','','class="srcinfo"'); ?></TD> 
     <td width="15%"> 
     <?php echo tep_draw_textarea_field('data[specification][]', 'soft', 10,3, $HTTP_POST_VARS['specification'],'class="srcinfo"'); ?> 
     </td> 
     <td width="10%"><div class="srcinfo_op"> 
     <?php echo tep_draw_checkbox_field('data[option][]','purchase', false).'&nbsp;Purchase'; 
       echo tep_draw_checkbox_field('data[option][]','sell', false).'&nbsp;Sell';   ?> 
     </div> 

     </td> 
     <td width="15%"> 

     <?php $source_array = array(); 
       $source_array[0] = array('id' => 'All', 'text' => 'All India'); 
       $source_array[1] = array('id' => 'AP', 'text' => 'Andhra Pradesh'); 
       $source_array[2] = array('id' => 'ARP', 'text' => 'Arunachal Pradesh'); 
       $source_array[3] = array('id' => 'ASM', 'text' => 'Assam'); 
       $source_array[4] = array('id' => 'BHR', 'text' => 'Bihar'); 
       $source_array[5] = array('id' => 'DL', 'text' => 'Delhi'); 

       echo tep_draw_pull_down_menu('data[source][]', $source_array,'','class="srcinfo_source" multiple onchange="changeSelection(this.value)" id="ind"'); ?> 
     </td> 
     <td width="10%"> 
     <?php $frequency_array = array(); 
       $frequency_array[0] = array('id' => 'Yr', 'text' => 'Yearly'); 
       $frequency_array[1] = array('id' => 'mnth', 'text' => 'Monthly'); 


       echo tep_draw_pull_down_menu('data[freq][]', $frequency_array,'','class="srcinfo" style="margin-top:50px;"'); ?> 
     </td> 
     <td width="8%"> 
     <?php echo tep_draw_input_field('data[qty][]','','class="srcinfo" style="margin-top:50px;"'); ?> 

     </td> 
     <td width="10%"> 
     <?php $unit_array = array(); 
       $unit_array[0] = array('id' => 'kg', 'text' => 'kilogram'); 
       $unit_array[1] = array('id' => 'gr', 'text' => 'gram'); 
       $unit_array[2] = array('id' => 'mg', 'text' => 'milligram'); 


       echo tep_draw_pull_down_menu('data[unit][]', $unit_array,'','class="srcinfo" style="margin-top:50px;"'); ?> 
     </td> 
    </TR> 

</TABLE>  
</td></tr> 
          <tr><td> 
          <?php echo tep_draw_button(IMAGE_BUTTON_PRODINFO, 'person', null, 'primary',array('params' => 'name="add_pro" class="btn btn-danger" ')); ?> 
          </td></tr> 
         </table> 
         <?php 

        if(isset($_POST['add_pro'])) 
         { 
         foreach($html->find('dataTable') as $table){ 
         $all_trs = $table->find('tr'); 
         $count = count($all_trs); 
         echo $count; 
         exit; 
         } 
         $src = $_POST['source']; 
         $products_source = implode(",", $src); 
         $opt = $_POST['option']; 
         $products_options = implode(",", $opt); 
         $products_array = array(
          'products_quantity' => $products_quantity, 
          'products_date_added' => 'now()', 
          'products_source' => $products_source, 
          'products_frequency' => $products_frequency, 
          'products_options' => $products_options, 
          'products_unit' => $products_unit, 
          'customers_id' => $customer_id 
         ); 

         tep_db_perform(TABLE_PRODUCTS, $products_array); 
          $products_desc_array = array(
          'products_name' => $products_name, 
          'products_description' => $products_description 
         ); 

         tep_db_perform(TABLE_PRODUCTS_DESCRIPTION, $products_desc_array); 
         $prod_id = tep_db_insert_id(); 
         $category_id_array = array('products_id' => $prod_id, 
                'categories_id' => $category_type_id); 
         tep_db_perform(TABLE_PRODUCTS_TO_CATEGORIES, $category_id_array); 
         $update_stage = tep_db_query("update " . TABLE_CUSTOMERS . " set customers_stage='5' where customers_id = '" . $customer_id. "'"); 
         tep_redirect(tep_href_link(FILENAME_REGISTRATION_6, '', 'SSL')); 
         } 

        ?> 
        </form> 

我想插入行中的值在動態生成的窗體中。

Answer 1

你可以使用jQuery做到這一點，試試這個

$(document).ready(function() { 
    var dt = $(".TABLE_CLASS tr").length; 
    alert(dt); 
}); 

檢查它在這裏的行動http://jsfiddle.net/G3Dtu/

Answer 2

你不能在PHP中做到這一點，你需要一個（網絡）客戶端語言。這裏的原生JS版：

var rowCount = document.getElementsByTagName("table")[0].getElementsByTagName("tr").length; 

，如果你在頁面上超過1臺，則需要改變document.getElementsByTagName（「表」）[0]部分可以得到正確的表。

請記住，這將獲得表中的所有行，包括任何標題行。

Answer 3

您必須使用以下任何替代方法。

1. simple html dom parser
2. PHPquery
3. snoopy

這些都是PHP腳本，將計算表中的行，以及你可以將它作爲一個jQuery功能。

/EDITED/

我給你一個例子爲這個簡單的HTML DOM解析器的幫助。

include("../simplehtml/simple_html_dom.php"); 
require('../phpQuery/phpQuery/phpQuery.php'); 

$html = file_get_html("http://".$_GET['siteName']); 
$es = $html->find('table tr'); 

希望這有助於。 PS。我沒有測試這個例子，如果你發現困難，請讓我知道。