使用jquery动态添加表格的行之后，如何获取表格高度？

Posted 2023-04-17

jquery获取html元素的高度使用height()方法即可。
定义和用法：
height() 方法返回或设置匹配元素的高度。

返回高度：
返回第一个匹配元素的高度。
如果不为该方法设置参数，则返回以像素计的匹配元素的高度。

语法：
$(selector).height(length)

例如：
$(".btn1").click(function()
alert($("p").height());
);

设置高度：

设置所有匹配元素的高度。

语法：
$(selector).height(length)

例如：
$(".btn1").click(function()
$("p").height(50);
); 参考技术A

给你写个小例子：

js代码：

$(document).ready(function()
$("#btn").click(function()
var h = $("#myTable").height();
alert(h);
//增加第四行，表格的行从0开始
var obj = document.all['myTable'].insertRow(4);
obj.insertCell(0).innerHTML = "14";
h = $("#myTable").height();
alert(h);
);
);

html代码：

<table id='myTable' border='2' width='50px'>
<tr><td>10</td></tr>
<tr><td>11</td></tr>
<tr><td>12</td></tr>
<tr><td>13</td></tr>
</table>
<input type='button' id='btn' value='insert'/>

有问题再追问。

本回答被提问者采纳 参考技术B 你在你的最大的div上使用jq获取高度就可以了

比如 $(“#divcss”).height(); 这样就可以获取高度了

如何使用 JQuery 从动态 html 表中获取选定的行值？

【中文标题】如何使用 JQuery 从动态 html 表中获取选定的行值？

【英文标题】：How to get selected row values from a dynamic html table using JQuery?

【发布时间】：2021-04-10 20:16:20

【问题描述】：

我有一个使用 laravel 框架从数据库动态填充的 html 表。

我在行标题中放置了一个复选框和一个Save Entry 按钮。我只想获取表格的选中行值，包括指示计算摘要的表格页脚。

类似这样的：

arrbreakdown = []; //push here the checked row values.
arrsummary = []; //push here the calculation summary.

可重现的例子：

<table class="table table-bordered" id="purchasetable">
    <thead>
        <tr>
            <th colspan="7" class="bg-secondary">
                Item Breakdown
            </th>
        </tr>
        <tr class="text-center">
            <th scope="col"><input type="checkbox" onclick="checkallcabin(this)" name="checkall"
                    id="checkall"> </th>
            <th scope="col">Item Name</th>
            <th scope="col">Description</th>
            <th scope="col">Qty</th>
            <th scope="col">UM</th>
            <th scope="col">Item Price</th>
            <th scope="col">Total Price</th>
            <script>
                function checkallcabin(bx) 
                    for (var tbls = $('#purchasetable'), i = tbls.length; i--;)
                        for (var bxs = tbls[i].getElementsByTagName("input"), j = bxs.length; j--;)
                            if (bxs[j].type == "checkbox")
                                bxs[j].checked = bx.checked;
                    setselect();
                
            </script>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td> <input onchange="enablereqinfo()" id="row1" type="checkbox" name="dtrow"></td>
            <td>TEST 1</td>
            <td><input type="text" style="width:100%" value="TEST DESC 1"></td>
            <td>PCS</td>
            <td class="totalqty">5</td>
            <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0"
                    class="iprice tnum" name="iprice"></td>
            <td class="totalprice text-right">0.00</td>
        </tr>
        <tr>
            <td> <input onchange="enablereqinfo()" id="row2" type="checkbox" name="dtrow"></td>
            <td>TEST 2</td>
            <td><input type="text" style="width:100%" value="TEST DESC 2"></td>
            <td>M</td>
            <td class="totalqty">7</td>
            <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0"
                    class="iprice tnum" name="iprice"></td>
            <td class="totalprice text-right">0.00</td>
        </tr>
        <tr>
            <th colspan="6">Sub Total</th>
            <th class="text-right subtotal">0.00</th>
        </tr>
        <tr>
            <th colspan="6">Discount</th>
            <th class="text-right"><input style="max-width:100px;" onkeyup="calculatetotals()" type="number" value="0.00"
                    class="discount text-right"></th>
        </tr>
        <tr>
            <th colspan="6"></th>
            <th class="text-right taxtotal">0.00</th>
        </tr>
        <tr>
            <th colspan="6">Net Amount</th>
            <th class="text-right netamount">0.00</th>
        </tr>
        <tr>
            <th colspan="6">Grand Total</th>
            <th class="text-right grandtotal">0.00</th>
        </tr>
    </tbody>
</table>

这是我的 Html：

<table class="table table-bordered" id="purchasetable">
    <thead>
        <tr>
            <th colspan="7" class="bg-secondary">
                Item Breakdown
            </th>
        </tr>
        <tr class="text-center">
            <th scope="col"><input type="checkbox" onclick="checkallcabin(this)" name="checkall"
                    id="checkall"> </th>
            <th scope="col">Item Name</th>
            <th scope="col">Description</th>
            <th scope="col">Qty</th>
            <th scope="col">UM</th>
            <th scope="col">Item Price</th>
            <th scope="col">Total Price</th>
            <script>
                function checkallcabin(bx) 
                    for (var tbls = $('#purchasetable'), i = tbls.length; i--;)
                        for (var bxs = tbls[i].getElementsByTagName("input"), j = bxs.length; j--;)
                            if (bxs[j].type == "checkbox")
                                bxs[j].checked = bx.checked;
                    setselect();
                
            </script>
        </tr>
    </thead>
    <tbody>

    </tbody>
</table>

还有我的 jquery：

function getpurchasereqinfo(prid) 
    var val = (prid.value || prid.options[prid.selectedIndex].value);

    $.ajax(
            type: 'POST',
            url: '/dashboard/purchasing/quotation/get-prrequestinfo',
            data: 
                "refid": val,
                "transtype": $('#reqtype').val()
            ,
            encode: true,
            dataType: 'json',
            headers: 
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            ,
        )
        .done(function (data) 
            var cnt = 0;
            $("#purchasetable > tbody").empty();

            for (i in data.prrequestinfo) 

                cnt = cnt + 1;
                $("#purchasetable > tbody").
                append("<tr>" +
                    "<td> <input onchange='enablereqinfo()' id='row" + cnt +
                    "' type='checkbox' name='dtrow'></td>" +
                    "<td>" + data.prrequestinfo[i]['item_name'] + "</td>" +
                    "<td><input type='text' style='width:100%' value='"+ data.prrequestinfo[i]['idescription'] +"'></td>" +
                    "<td>" + data.prrequestinfo[i]['um'] + "</td>" +
                    "<td class='totalqty'>" + data.prrequestinfo[i]['quantity'] +
                    "</td>" +

                    "<td>" +
                    "<input type='number' step='0.01' title='Currency' pattern='^\d+(?:\.\d1,2)?$' onblur='this.parentNode.parentNode.style.backgroundColor=/^\d+(?:\.\d1,2)?$/.test(this.value)?'inherit':'red' step='.01' style='max-width:100px;' value='0' onkeyup='calculateprice()' min='0'  class='iprice tnum' name='iprice'>" +
                    "</td>" +

                    "<td class='totalprice text-right'>" + '0.00' + "</td>" +

                    "</tr>"
                );
            


            $("#purchasetable > tbody").
            append(

                "<tr>" +
                "<th colspan='6'>Sub Total</th>" +
                "<th class='text-right subtotal'>0.00</th>" +
                "</tr>" +
                "<tr>" +
                "<th colspan='6'>Discount</th>" +
                "<th class='text-right'><input style='max-width:100px;' onkeyup='calculatetotals()' type='number' value='0.00' style='width:100%; font-weight:bold;' class='discount text-right'></th>" +
                "</tr>" +
                "<tr>" +
                "<th colspan='6'></th>" +
                "<th class='text-right taxtotal'>0.00</th>" +
                "</tr>" +
                "<tr>" +
                "<th colspan='6'>Net Amount</th>" +
                "<th class='text-right netamount'>0.00</th>" +
                "</tr>" +
                "<tr>" +
                "<th colspan='6'>Grand Total</th>" +
                "<th class='text-right grandtotal'>0.00</th>" +
                "</tr>"

            );
        );

有什么想法吗？谢谢

【问题讨论】：

也显示你的 html 。

请提供一个最小的、可重现的例子：***.com/help/minimal-reproducible-example

@Twisty，我已经更新了我的问题。

嗨，所以你需要在数组或整行中推送itemid 值？

带检查的行的所有项目值。并将计算汇总到另一个数组中。我突出显示了我要保存的数据。

【参考方案1】：

您可以遍历使用each 循环检查的所有复选框，然后使用.val() 或.text() 将values 推送到数组中的行中

演示代码：

$("#save").click(function() 
  var arrbreakdown = []; //push here the checked row values.
  var arrsummary = []; //push here the calculation summary.
  //loop through checked checkbox
  $("tbody input[type='checkbox']:checked").each(function() 
    var selector = $(this).closest('tr'); //get closest row
    //push values in array
    arrbreakdown.push(
      "Name": selector.find('td:eq(1)').text(),
      "Description": selector.find('td:eq(2) input').val(),
      "Qty": selector.find('td:eq(3)').text(),
      "UM": selector.find('td:eq(4)').text(),
      "Item_Price": selector.find('.iprice').val(),
      "Total": selector.find('td:eq(6)').text()
    )

  )
  //for summary
  arrsummary.push(
    "Sub_Total": $(".subtotal").text(),
    "Discount": $(".discount").val(),
    "taxtotal": $(".taxtotal").text(),
    "netamount": $(".netamount").text(),
    "grandtotal": $(".grandtotal").text()
  )
  console.log(arrsummary)
  console.log(arrbreakdown)

)

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table table-bordered" id="purchasetable">
  <thead>
    <tr>
      <th colspan="7" class="bg-secondary">
        Item Breakdown
      </th>
    </tr>
    <tr class="text-center">
      <th scope="col"><input type="checkbox" onclick="checkallcabin(this)" name="checkall" id="checkall"> </th>
      <th scope="col">Item Name</th>
      <th scope="col">Description</th>
      <th scope="col">Qty</th>
      <th scope="col">UM</th>
      <th scope="col">Item Price</th>
      <th scope="col">Total Price</th>
      <script>
        function checkallcabin(bx) 
          for (var tbls = $('#purchasetable'), i = tbls.length; i--;)
            for (var bxs = tbls[i].getElementsByTagName("input"), j = bxs.length; j--;)
              if (bxs[j].type == "checkbox")
                bxs[j].checked = bx.checked;
          //setselect();
        
      </script>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> <input onchange="enablereqinfo()" id="row1" type="checkbox" name="dtrow"></td>
      <td>TEST 1</td>
      <td><input type="text" style="width:100%" value="TEST DESC 1"></td>
      <td>PCS</td>
      <td class="totalqty">5</td>
      <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0" class="iprice tnum" name="iprice"></td>
      <td class="totalprice text-right">0.00</td>
    </tr>
    <tr>
      <td> <input id="row2" type="checkbox" name="dtrow"></td>
      <td>TEST 2</td>
      <td><input type="text" style="width:100%" value="TEST DESC 2"></td>
      <td>M</td>
      <td class="totalqty">7</td>
      <td><input type="number" step="0.01" style="max-width:100px;" value="0.00" onkeyup="calculateprice()" min="0" class="iprice tnum" name="iprice"></td>
      <td class="totalprice text-right">0.00</td>
    </tr>
    <tr>
      <th colspan="6">Sub Total</th>
      <th class="text-right subtotal">0.00</th>
    </tr>
    <tr>
      <th colspan="6">Discount</th>
      <th class="text-right"><input style="max-width:100px;" onkeyup="calculatetotals()" type="number" value="0.00" class="discount text-right"></th>
    </tr>
    <tr>
      <th colspan="6"></th>
      <th class="text-right taxtotal">5.00</th>
    </tr>
    <tr>
      <th colspan="6">Net Amount</th>
      <th class="text-right netamount">4.00</th>
    </tr>
    <tr>
      <th colspan="6">Grand Total</th>
      <th class="text-right grandtotal">6.00</th>
    </tr>
  </tbody>
</table>
<button id="save">Save</button>