如何获取html表的行id

时间:2011-09-01 18:25:06

标签: php javascript

假设我有一些来自数据库的数据并存储在一个数组中,如下所示:

$testArray = array(
    array('0', 'name1', 'status1'),
    array('1', 'name2', 'status2')
);

我可以将数组的内容打印为html表,就像这样:

Id  name    status
0   name1   status1 
1   name2   status2 

我想在每行末尾使用'status'下拉列表来更改每个条目的状态,并更新到数据库表中。我的问题是: 当我选择drodown列表的选项时,如何获取每行的行ID('Id'列)? 如何将这些信息传递给后端以更新数据库表?我想它应该使用一些JavaScript。以下是代码:

<?php

$testArray = array(
    array('0', 'name1', 'status1'),
    array('1', 'name2', 'status2')
);
?>

<html>
    <head>   
    </head>
    <body>
        <table>
            <tr>
                <td>Id</td>
                <td>name</td>
                <td>status</td>
            </tr>
            <?php
            for ($i = 0; $i < count($testArray); $i++){
                echo '<tr>';
                for ($j = 0; $j < count($testArray[$i]); $j++){
                    echo '<td>';
                    echo $testArray[$i][$j];
                    echo '</td>';
                }
                echo '<td>';
                echo '<select>';
                echo "'<option value='0'>status1</option>";
                echo "'<option value='1'>status2</option>";
                echo '</select>';
                echo '</td>';
                echo '</tr>';
            }
            ?>
        </table>
    </body>
</html>

感谢您的帮助!

3 个答案:

答案 0 :(得分:1)

你可以:

  1. 将您的行ID存储在第一列的隐藏字段中,使用jQuery
  2. 存储
  3. 存储为id属性,然后使用jQuery获取值
  4. (我认为最好的一个)将id属性中的id存储在您的select控件中,然后使用jQuery获取所选索引更改的值

    在html中你将拥有:

    <select id="1">

    在javascript中:

    $('select').change(function () {
        var id = $(this).attr('id');
    
        // post id to the server using ajax (you can use jQuery ajax request)
    });
    

答案 1 :(得分:1)

你可以:

  1. 为每个选择提供与数据行对应的ID。

  2. 在更改(jQuery)时,获取select的值,并使用jquery ajax调用将rowID和'StatusValue'发送到处理页面。

  3. 在返回数据时显示状态消息。

  4. http://api.jquery.com/jQuery.ajax/

    - 构建选择

    <?php
                for ($i = 0; $i < count($testArray); $i++){
                    echo '<tr>';
                    for ($j = 0; $j < count($testArray[$i]); $j++){
                        echo '<td>';
                        echo $testArray[$i][$j];
                        echo '</td>';
                    }
                    echo '<td>';
                    **echo '<select id="' + $testArray[$i][0] + '">';**
                    echo "'<option value='0'>status1</option>";
                    echo "'<option value='1'>status2</option>";
                    echo '</select>';
                    echo '</td>';
                    echo '</tr>';
                }
    ?>
    

    - jQuery(你需要jquery文件,从jquery.com下载)

    $(document).ready(function(){
        $('select').change(function () {
            var rowIdVal = $(this).attr('id');  // the id of the select (your rowID)
            var statusVal = $(this).val();  // the value of the select
    
            // post id to the server using ajax (you can use jQuery ajax request)
            ////I would check if the values are valid and not null...
            $.ajax({
               type: "POST",
               url: "YOURHANDLERFILE.php",
               data: {status: statusVal, rowId: rowIdVal},
               success: function(d){     
                    //show a status message     
               }
             });
        });
    });
    

答案 2 :(得分:0)

我会做像

这样的事情
$('#yourTableId').find('select').change(function() { //bind a change event to the selects
   $(this).closest('tr') //this way you get the tr element of the row you changed the select value
        .find('td:first') //or .find('td').first(). This will give you the td element for the Id column
        .val(); //The actual value of the td Id element
});