javascript - 如何使用jquery获取循环中单元格的值

标签 javascript jquery

我想要获取与该行相关的单元格的值,以计算我要添加的同一行的另一个单元格中的值的差异。

该片段显示了我想要从我登陆的任何行的同一行获取数据的意思,并且仅获取该实例中选定的行。除此之外,它与代码无关。

$(document).ready(function() {
  $('tbody tr').eq(0).find('td').eq(7).css('background-color', 'green');
  $('tbody tr').eq(3).find('td').eq(7).css('background-color', 'green');
  $('tbody tr').eq(4).find('td').eq(7).css('background-color', 'green');
});
table,
td {
  border: 1px solid #000;
}
td {
  width: 40px;
  height: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <table>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</body>

这是我的 jquery 代码,用于从单元格中获取值

$(document).on('blur', '.price', function(){
        var id = $(this).data("id1");
        var price = $(this).text();
        edit_data(id, price, "price");
    });

我试图通过添加来解决这个问题:

$(document).on('blur', '.price', function(){
        var id = $(this).data("id1");
        var price = $(this).text();
        edit_data(id, price, "price");

        var id2 = $('.final_price').data("id2");
        var final_price = $('.final_price').text();

        var diff_total = final_price - price;
        edit_data(id, diff_total, "diff");

    });

上面的jquery代码返回我拥有的每个单元格中所有final_price值的字符串

这是表格的代码,但正如您所看到的,它是一个数组,返回多个单元格,每个单元格都有自己的值

<?php

$connect = mysqli_connect("localhost", "root", "", "test_db");  
$output = '';  
$sql = "SELECT * FROM tbl_sample ORDER BY id DESC";  
$result = mysqli_query($connect, $sql);

$output .= '
    <div class="table-responsive">
    <table class="table table-bordered">
    <tr>
    <th width="10%">Id</th>
    <th width="40%">Price</th>
    <th width="40%">Final Price</th>
    <th width="10%">Delete</th>
    </tr>';
if(mysqli_num_rows($result) > 0){
    $final_price_total = 0;
    $price_total = 0;
    while($row = mysqli_fetch_array($result)){
        $output .= '
            <tr>
            <td>'.$row["id"].'</td>
            <td class="price" data-id1="'.$row["id"].'" contenteditable>'.$row["price"].'</td>
            <td class="final_price" data-id2="'.$row["id"].'" contenteditable>'.$row["final_price"].'</td>
            <td><button type="button" name="delete_btn" data-id3="'.$row["id"].'" class="btn btn-xs btn-danger btn_delete">x</button></td>
            </tr>
            ';
            $final_price_total += $row["final_price"];
            $price_total += $row["price"];
        }
        $output .= '
            <tr>
            <td></td>
            <td class="price_total" id="price_total" name="price_total" value="'.$price_total.'" contenteditable>'.$price_total.'</td>
            <td class="final_price_total" id="final_price_total" name="final_price_total" value="'.$final_price_total.'" contenteditable>'.$final_price_total.'</td>
            <td></td>
            </tr>
            ';
        $output .= '
            <tr>
            <td></td>
            <td id="price" contenteditable></td>
            <td id="final_price" contenteditable></td>
            <td><button type="button" name="btn_add" id="btn_add" class="btn btn-xs btn-success">+</button></td>
            </tr>
            ';
}
else{
    $output .= '<tr>
    <td colspan="4">Data not Found</td>
    </tr>';
}
$output .= '</table>
</div>';
echo $output;
?>

最佳答案

我假设您正在尝试读取同一行的最终价格,即价格的父 tr 内。以下代码将起作用。

$(document).on('blur', '.price', function(){
        var $el = $(this);
        var id = $el.data("id1");
        var price = $el.text();
        edit_data(id, price, "price");

        var $fel = $el.parents('tr:first').find('.final_price');
        var id2 = $fel.data("id2");
        var final_price = $fel.text();

        var diff_total = final_price - price;
        edit_data(id, diff_total, "diff");

    });

关于javascript - 如何使用jquery获取循环中单元格的值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/39112671/

相关文章:

javascript - Redux 在组件之间共享 Action

javascript - 如何像在 JavaScript 中一样在 Stream.map() 中应用 Direct 函数

javascript - 以编程方式切换到 Google Chrome 中的选项卡,如果找不到选项卡则打开 URL

javascript - JQGrid - 卡住列 - 卡住列到网格的右端

javascript - 如何使用 Javascript 设置 css 类属性?

javascript - 使用 url 参数填充 div,但前提是在使用 settimeout 后另一个 span 为空

JavaScript 未加载最新提交的数据

javascript - Node.js:获取一个mp4文件的音视频格式信息

javascript - 如果条件满足jquery如何将类添加到随机元素

javascript - 我的垂直内容 slider 有一个错误