使用Ajax選擇行表（jQuery）

Question

我想使用ajax從行表td值中發送（刪除）id和p_type值。 根據所選行檢測行

<table class="u-full-width" >
    <thead>
        <tr>
            <td hidden>id</td>
            <td>Printer name</td>
            <td>Click</td>
        </tr>
    </thead>

    <tbody>
        <?php 
            foreach ($value->result() as $row) { ?>
            <form>
             <tr>
                <td id="id" hidden><?php echo $row->ipt_id;?></td>
                <td id="p_type"><?php echo $row->ink_printer_type;?></td>
                <td><input id="submit" class="button-primary" type="submit" value="Delete"></td>
            </tr>
          </form>
        <?php } ?>
    </tbody>
</table>

這就是ajax。 我嘗試為每一行取值，但仍然行不通。 我可以使用這種方式嗎？如果還有其他方式，請告訴我。

<script type="text/javascript">
    $('#submit').click(function(){
            console.log('submit clicked!!');
            id = $('#id').val();
            p_type = $('#p_type').val();

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {

                    console.log('result is show!!');
                }
            });
    });   
</script>

Answer 1

將.val()更改為.text()

id = $.trim( $('#id').text() );  //Remove leading and trailing space  using trim()
p_type = $.trim( $('#p_type').text() );

注意：ID必須是唯一的，因此您必須在代碼中將id更改為class。

Answer 2

不要將相同的“ id”分配給多個“ tds”。 請改用虛擬html屬性，該屬性可以在JavaScript中使用，瀏覽器將忽略它們。 嘗試這個，

    <form>
    <table class="u-full-width" >
        <thead>
            <tr>
                <td hidden>id</td>
                <td>Printer name</td>
                <td>Click</td>
            </tr>
        </thead>

        <tbody>
            <?php 
                foreach ($value->result() as $row) { ?>                
                 <tr>
                    <td><?php echo $row->ipt_id;?></td>
                    <td><?php echo $row->ink_printer_type;?></td>
                    <td><input class="button-primary" type="button" value="Delete" data-id="<?php echo $row->ipt_id;?>" data-ptype="<?php echo $row->ink_printer_type;?>"></td>
                </tr>              
            <?php } ?>
        </tbody>
    </table>
  </form>

而在JavaScript方面的變化如下：

<script type="text/javascript">
    $('.button-primary').click(function(){
            console.log('submit clicked!!');
            id = $(this).attr('data-id');
            p_type = $(this).attr('data-ptype');

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {
                    console.log('result is show!!');
                }
            });
    });   
</script>

希望它能工作。

Answer 3

您的HTML最終會以相同的ID多次出現，這違反標准，並且jQuery將不知道采用哪個ID。

另外，您不能在表單中使用表格，它必須位於單元格中或不在表中。

而且，您不應該將按鈕的類型提交，因為您不希望提交將刷新頁面的表單，並且您也不想這樣做，因為您正在使用AJAX。 為什么要使用表格？

您可以遍歷DOM到最近的表行（ $(this).closest(tr).find('.id') ）或使用prev（）

更改為：

<form><!--not needed, but perhaps you want it, if so, place it here and not in the tbody tag -->
<table class="u-full-width" >
    <thead>
        <tr>
            <td hidden>id</td>
            <td>Printer name</td>
            <td>Click</td>
        </tr>
    </thead>

    <tbody>
        <?php 
            foreach ($value->result() as $row) { ?>
             <tr>
                <td class="id" hidden><?php echo $row->ipt_id;?></td>
                <td class="p_type"><?php echo $row->ink_printer_type;?></td>
                <td><input class="button-primary" type="button" value="Delete"></td>
            </tr>
        <?php } ?>
    </tbody>
</table>
</form>

jQuery：

<script type="text/javascript">
    $('.button-primary').click(function(){
            console.log('submit clicked!!');
            id = $(this).prev('.id').text();
            p_type = $(this).prev('.p_type').text();

            value = [id ,p_type];
            //ajax POST
            $.ajax({
                url:'show_delete_printer_type_edit',
                type: 'POST',
                data: value,
                success: function() {

                    console.log('result is show!!');
                }
            });
    });   
</script>