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

不要分配相同的＆＃39; ID＆＃39;到了多个地方。使用伪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。

此外，你不能在tbody中有一个表单，它需要在一个单元格或外部表格。

并且您不应该提交按钮的类型，因为您不想提交将刷新页面的表单，并且您不希望这样，因为您正在使用AJAX。为什么要使用表格？

您可以将DOM遍历到closest表格行（$(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>

使用ajax（jquery）选择行表

3 个答案: