Как написать функцию Javascript для сбора данных из таблицы?

-1

У меня есть простая таблица, однако моя таблица содержит PHP в TD. К ним относятся выпадающие списки, которые создают другую таблицу данных при нажатии. Как я могу написать функцию Javascript для захвата этих данных?Как написать функцию Javascript для сбора данных из таблицы?

<table width="100%" hight="100%" border="1"> 
<tbody> 
<tr> 
    <th scope="col" width="10%">Table1</th> 
    <td> 
<?php include 'options_drop1.php'; ?> 
<?php include 'options_drop2.php'; ?> 
<?php include 'options_drop3.php'; ?> 
    </td> 
    </tr> 
</tbody> 
</table>

Пример из options_drop.php

<html> 
    <head> 
    <script> 
    function showoption1(str) { 
    if (str == "") { 
     document.getElementById("txtHint1").innerHTML = ""; 
     return; 
    } else { 
     if (window.XMLHttpRequest) { 
     // code for IE7+, Firefox, Chrome, Opera, Safari 
     xmlhttp = new XMLHttpRequest(); 
     } else { 
     // code for IE6, IE5 
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
     xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { 
      document.getElementById("txtHint1").innerHTML = xmlhttp.responseText; 
     } 
     }; 
     xmlhttp.open("GET","getoption.php?q="+str,true); 
     xmlhttp.send(); 
    } 
    } 
    </script> 
    <form> 
    <select name="cars" onchange="showoption1(this.value)"> 
     <option value="">Choose a car</option> 
     <option value="1">Ford</option> 
     <option value="2">Toyota</option> 
     <option value="3">Honda</option> 
     <option value="4">Mazda</option> 
    </select> 
    </form> 
    <br> 
    <div id="txtHint1"><b></b></div> 
</html>

Пример getoption.php

<html> 
    <head> 
    <style> 
     table { 
     width: 100%; 
     border-collapse: collapse; 
     } 
     table, td, th { 
     border: 1px solid black; 
     padding: 5px; 
     } 
     th {text-align: top;} 
    </style> 
    </head> 
    <body> 
    <?php 
    $q = intval($_GET['q']); 
    $sql="SELECT * FROM cars WHERE id = '".$q."'"; 
    $result = mysqli_query($mysqli, $sql); 
    if (isset($q)) { 
    while($row = mysqli_fetch_array($result)) { 
     echo "<table>"; 
     echo "<tr><th>drivetrain</th>"; echo "<td>" . $row['drive'] . "</td>";  echo "</tr>"; 
     echo "<tr><th>engine size</th>"; echo "<td>" . $row['engine'] . "</td>"; 
     echo "</tr>"; 
     echo "<tr><th>MPG</th>"; echo "<td>" . $row['mpg'] . "</td>"; 
     echo " </tr>"; 
     echo "<tr><th>Cost</th>"; echo "<td>" . $row['cost'] . "</td>"; 
     echo "</tr>"; 
     echo "<tr><th>Pros</th>"; echo "<td>" . $row['pro'] . "</td>"; 
     echo "</tr>"; 
     echo "<tr><th>Cons</th>"; echo "<td>" . $row['con'] . "</td>"; 
     echo "</tr>"; 
    } 
    echo "</table>"; 
    } 
    ?> 
    </body> 
</html>

источник

2016-02-10 Aidan G 73

** данных Захват ** Когда ?? На каком событии? –

Какие данные вы пытаетесь захватить? Выбранный параметр или данные, созданные с помощью select? Необходимо добавить дополнительную информацию по этому предмету :) – guradio

Как насчет '$ ('td select'). On ('change', function() {alert (this);}) '. Добавляйте разборные 'html' вместо' включенных 'php-скриптов. Никто не имеет этих файлов. – Rayon

<!DOCTYPE html> 
<html> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 


<script> 
    $(document).ready(function() { 


     $('#CarSelect').change(function() { 
      var szData = ''; 
      szData = szData + '<table class="tbl_added">'; 
      szData = szData + '<tr><th>drivetrain</th>'; 
      szData = szData + '<td> drive '+$(this).val()+'</td>'; 
      szData = szData + '</tr>'; 
      szData = szData + '<tr><th>engine size</th>'; 
      szData = szData + '<td>engine'+$(this).val()+'</td>'; 
      szData = szData + '</tr>'; 
      szData = szData + '<tr><th>MPG</th>'; 
      szData = szData + '<td>mpg' + $(this).val() + '</td>'; 
      szData = szData + ' </tr>'; 
      szData = szData + '<tr><th>Cost</th>'; 
      szData = szData + '<td>cost' + $(this).val() + '</td>'; 
      szData = szData + '</tr>'; 
      szData = szData + '<tr><th>Pros</th>'; 
      szData = szData + '<td>pro' + $(this).val() + '</td>'; 
      szData = szData + '</tr>'; 
      szData = szData + '<tr><th>Cons</th>'; 
      szData = szData + '<td>con' + $(this).val() + '</td>'; 
      szData = szData + '</tr>'; 
      szData = szData + '</table>'; 

      $('#td_to_append_table').append(szData) 

     }); 

     $('#btnGet').click(function() { 

      $('.tbl_added').each(function() { 
       $(this).find('tr').each(function() { 
        console.info($(this).find('td:eq(0)').text()) 

       }); 

      }) 


     }); 

    }); 


</script> 



<body> 

    <form> 
    <select name="cars" id="CarSelect"> 
<option value="">Choose a car</option> 
<option value="1">Ford</option> 
<option value="2">Toyota</option> 
<option value="3">Honda</option> 
<option value="4">Mazda</option> 
</select> 

<input type="button" id="btnGet" value="GetGata" /> 


<table width="100%" hight="100%" border="1"> 
<tbody> 
<tr> 
    <th scope="col" width="10%">Table1</th> 
    <td id="td_to_append_table"> 




    </td> 
    </tr> 
</tbody> 
</table> 


</form> 


</body> 
</html>

источник

2016-02-10 05:20:45 Aswathy

hmmm, так что это невозможно сделать на странице с помощью простой таблицы? –

u просто хотите, чтобы выбрать опцию данных onchange right ??? – Aswathy

скрипт на option_drop.php отправляет значение 1,2,3,4 в качестве q в getoption.php, которое фактически создает таблицу. Это ответ? –

Как написать функцию Javascript для сбора данных из таблицы?

ответ

Смежные вопросы