Javascript只从表格的第一行中选择值

时间:2016-06-14 07:27:47

标签: javascript php

我正在将数据库中的结果打印到表中。然后我需要使用它们,我使用javascript。 我还使用PHP从数据库中检索值并将其打印在表中。

<table id="datatable" class="table table-bordered" style="width: 100%;">
    <thead>
        <tr class="bg-teal-300">
            <th>Br.</th>
            <th>Materijal</th>
            <th>Tezina</th>
            <th>Boja</th>
            <th>Količina </th>
            <th><center><i class="ion-ios-cart-outline" style="font-size:18px; color:white;"><center></th>
        </tr>
    </thead>
    <tbody>
        <?php while($r=$q->fetch()){ 
            $id_print = $r['Id'];
            ?>
        <tr>
            <td><?='R-'. $r['Id']?></td>
            <td><?=$r['Material']?> </td>
            <td><?=$r['Quantity']?></td>
            <td><?=$r['Color']?></td>
            <td><input type="text" class="form-control" id="quantity" placeholder="" ></td>
            <td><center><button type="button" id="item" class="btn btn-default btn-sm" onclick="myFunction()" value="<?php echo 'R-' . $id_print ;?>"> <i class="icon-cart"></i></button></center></td> 
        </tr>
        <?php } ?>
    </tbody>
</table>

在表格中打印结果后,我需要在点击按钮后获得两个值。 我需要从输入字段(最后一列)用户类型编号中获取这些值,然后单击该按钮。 为此我使用以下javascript

<script>
    function myFunction() {
        var x = document.getElementById("quantity").value;
        var y = document.getElementById("item").value;

        window.location.href = "materijali.php?w1=" + x + "&w2=" + y
    }
</script> 

通过使用上面的脚本,我总是从第一行获取值并将这些值重定向到URL。 我想知道如何从点击按钮的行中获取值。

4 个答案:

答案 0 :(得分:1)

只需进行一些更改,

<table id="datatable" class="table table-bordered" style="width: 100%;">
<thead>
    <tr class="bg-teal-300">
        <th>Br.</th>
        <th>Materijal</th>
        <th>Tezina</th>
        <th>Boja</th>
        <th>Količina </th>
        <th><center><i class="ion-ios-cart-outline" style="font-size:18px; color:white;"><center></th>
    </tr>
</thead>
<tbody>
    <?php while($r=$q->fetch()){ 
        $id_print = $r['Id'];
        ?>
    <tr>
        <td><?='R-'. $r['Id']?></td>
        <td><?=$r['Material']?> </td>
        <td><?=$r['Quantity']?></td>
        <td><?=$r['Color']?></td>
        <td><input type="text" class="form-control" id="quantity" placeholder="" ></td>
        <td><center><button type="button" id="item" class="btn btn-default btn-sm" onclick="myFunction(this)" value="<?php echo 'R-' . $id_print ;?>"> <i class="icon-cart"></i></button></center></td> 
    </tr>
    <?php } ?>
</tbody>

在javascript中:

<script>
function myFunction(object) {
var x = $(object).attr("value"); 
var y = $('#quantity', $(object).parent().parent().siblings()).val(); 
window.location.href = "materijali.php?w1=" + x + "&w2=" + y; 
}
</script>

希望这会有所帮助!

答案 1 :(得分:0)

是它复制了IDS。输入的ID“数量”是重复的。按钮“项目”的ID正在重复。

Java Script正在考虑第一个ID。每次检索第一行时。

为每行使用不同的ID。 它类似项目 - (PHP项目ID)和数量 - (Php项目 - Id) 所以No Row正在复制Row Ids。

答案 2 :(得分:0)

为您的input提供attribute名称name="qty",如<input type="text" class="form-control" id="quantity" placeholder="" name="qty" >

button

从你的<button type="button" id="item" class="btn btn-default btn-sm" onclick="myFunction(this)" value="<?php echo 'R-' . $id_print ;?>"> 传递按钮的引用,就像这样

input

在javascript代码中获取function myFunction(btn) { var value = btn.parentElement.parentElement.parentElement.querySelector("input[name='Name']").value } 这样的值

expires

答案 3 :(得分:0)

试试这个

<tbody>
    <?php while($r=$q->fetch()){ 
        $id_print = $r['Id'];
        ?>
    <tr>
        <td><?='R-'. $r['Id']?></td>
        <td><?=$r['Material']?> </td>
        <td><?=$r['Quantity']?></td>
        <td><?=$r['Color']?></td>
        <td><input type="text" class="form-control" id="quantity<?=$id_print?>" placeholder="" ></td>
        <td><center><button type="button" class="btn btn-default btn-sm" onclick="myFunction(<?php echo 'R-' . $id_print ;?>,<?=$id_print?>)" > <i class="icon-cart"></i></button></center></td> 
    </tr>
    <?php } ?>
</tbody>


<script>
function myFunction(a,b) {
    var x = document.getElementById("quantity"+b).value;
    var y = a;

    window.location.href = "materijali.php?w1=" + x + "&w2=" + y
}
</script>