jQuery找到选择元素的ID

时间:2019-11-06 15:40:43

标签: jquery

我需要从已更改复选框的行中获取$empSupID

这是php:

...
while(mysqli_stmt_fetch($stmtGetEmployeeSupplements))
    {
        $checkedincludeTRS = ($includeTRS == '1') ? 'checked="checked"':'';
        ?>                      
        <tr>
            <td> <div contentEditable='true' class='edit' id='empSupID_<?php echo $empSupID; ?>'><?php echo $empSupID; ?></div> </td>
            <td> <div contentEditable='true' class='edit' id='name_<?php echo $id; ?>'><?php echo $name; ?></div> </td>
            <td> <div contentEditable='true' class='edit' id='amount_<?php echo $id; ?>'><?php echo $amount; ?></div></td>
            <td> <div contentEditable='true' class='edit' id='description_<?php echo $id; ?>'><?php echo $description; ?></div> </td>
            <td> <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_<?php echo $id; ?>' <?php echo $checkedincludeTRS; ?> /></div> </td>
            <td style="display:none;"> <div contentEditable='true' class='edit' id='randomKey_<?php echo $id; ?>'><?php echo $rndKey; ?></div> </td>
            <td> <button type='button' class='deleteEmpSup'  id=<?php echo $empSupID; ?>>Delete</button> </td>                      
        </tr>
    <?php
    $count ++;
}

这是jQuery:

    $(".edit").focusout(function() {
        $(this).removeClass("editMode");

        var id = this.id;
        var split_id = id.split("_");
        var field_name = split_id[0];
        var edit_id = split_id[1];

        var position = $(this).parents('tr').find('.positionList').val();

        var value = $(this).text();

        var employeeSupplementID = this.id

        $.ajax({
            url: 'update.php',
            type: 'post',
            data: { field: field_name, value: value, id: edit_id, position: position, checked: checkedStatus },
            success: function(response) {         
            }
        });

    });

我在jQuery中尝试过var employeeSupplementID = $("[id^=empSupID_]");,但它返回的数组如下: employeeSupplementID = k.fn.init(2) [div#empSupID_5.edit, div#empSupID_6.edit, prevObject: k.fn.init(1)]。我不确定该怎么办。

如果更改了employeeSupplementID = "empSupID_5"为5的行的复选框,则预期输出为empSupID

我该怎么做?

2 个答案:

答案 0 :(得分:1)

我认为这就是您所需要的。从GoogleSignIn元素开始直到找到tr,然后找到以.edit开头的id,获取id属性,然后除以empSupID_来获取id的第二部分。

_

答案 1 :(得分:0)

我会尝试

empSupID = $(e.target).closest("tr").find("[id^=empSupID]").prop("id").split("_")[1]

$("table").on("click",function(e) {
  console.log(e.target.type)
  if (e.target.type && e.target.type==="checkbox") {
    console.log(
      $(e.target).closest("tr").find("[id^=empSupID]").prop("id").split("_")[1]
    )  
  }
})  
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td>
      <div contentEditable='true' class='edit' id='empSupID_1'>emp1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='name_1'>name1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='amount_1'>amt1</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='description_1'>desc1</div>
    </td>
    <td>
      <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_1' /></div>
    </td>
    <td style="display:none;">
      <div contentEditable='true' class='edit' id='randomKey_1'>key1</div>
    </td>
    <td> <button type='button' class='deleteEmpSup' id=1>Delete</button> </td>
  </tr>
  <tr>
    <td>
      <div contentEditable='true' class='edit' id='empSupID_2'>emp2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='name_1'>name2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='amount_1'>amt2</div>
    </td>
    <td>
      <div contentEditable='true' class='edit' id='description_1'>desc2</div>
    </td>
    <td>
      <div><input contentEditable='true' class='edit' type='checkbox' id='includeTRS_1' /></div>
    </td>
    <td style="display:none;">
      <div contentEditable='true' class='edit' id='randomKey_1'>key2</div>
    </td>
    <td> <button type='button' class='deleteEmpSup' id=2>Delete</button> </td>
  </tr>  
</table>