【问题标题】:Get values in td when checkbox is marked标记复选框时获取 td 中的值
【发布时间】:2014-04-17 17:35:17
【问题描述】:

我有一个从人员那里获取地址的查询。数据以表格形式呈现:

echo "<div id='rightcontent'><table id='one-column-emphasis'>";
echo "<th><input type='checkbox' name='csv_all' id='csv_all'></th><th>Namn</th><th>Adress</th><th>Adress2</th><th>Adress3</th><th>Personnummer</th><th>Telefonnummer</th><th>Telefonnummer2</th>";
$antal_sidor = round($obj->search->wp->totalHits / $obj->search->wp->pageSize); 

foreach($obj->search->wp->features as $fish) //Loopar ut 50st (pageSize)
{
    echo "<tr>";
    echo "<td><input type='checkbox' value='csv' class='csv'></td>";
    echo "<td>" . $fish->name . "</td>";
    foreach($fish->addresses as $ad)
    {
        echo "<td>" . $ad->label . " " . $ad->postcode . " " . $ad->area . "</td>";
    }   
    if(!empty($fish->dateOfBirth))
    {
        echo "<td>" . $fish->dateOfBirth . "</td>";
    }   
    if(!empty($fish->phoneNumbers))
    {
        foreach($fish->phoneNumbers as $ph)
        {
            echo "<td>" . $ph . "</td>";
        }
    }       

    echo "</tr>";
}
echo "</table>";

如您所见,行中列出了一个复选框字段。目的是标记所有复选框,然后将地址导出为 CSV。但是,当我选中所有复选框时,如何获取 tds 的值和地址?

【问题讨论】:

  • @AmalMurali:在这种情况下,我不想从选中的复选框中获取价值?
  • 可以显示表格的HTML输出吗?
  • @JayBlanchard:我应该怎么给你看?
  • 页面渲染后查看源代码,将结果复制粘贴到您的帖子中。

标签: php jquery checkbox


【解决方案1】:

缺少详细信息,您希望在发送表单时在 javascript 客户端或服务器端使用 PHP 执行此操作? 对于服务器端,您需要在复选框输入中添加一个名称,该字段将连同其值一起发送到 PHP。对于客户端,您可以先将数据插入 DOM,然后使用 jQuery 查找已检查的输入并检索数据。

foreach($obj->search->wp->features as $fish) //Loopar ut 50st (pageSize)
{
    echo "<tr data-phone-numbers='" . json_encode($fish->phoneNumbers) . "' data-addresses='" . json_encode($fish->addresses) . "'>";
    echo "<td><input type='checkbox' value='csv' class='csv'></td>";
    echo "<td>" . $fish->name . "</td>";
...

然后使用 jQuery 只需收集检查的输入并找到编码的地址:

var addressList = [];
$("input[type='checkbox']:checked").each(function(){
    addressList.push({
        "phones": JSON.parse($(this).closest("tr").data("addresses")),
        "addresses": JSON.parse($(this).closest("tr").data("phone-numbers"))
    });
});
//addressList now is an array phones and addresses objects for all the checked items

附带说明,我看不出您的代码将如何生成格式良好的表格单元格,您在 TR 中有不可预测的 TD 数量。您可能需要重新评估您的表格结构,以确保每一行都有固定数量的单元格。

【讨论】:

  • 如何从 tds 中获取电话号码?不仅仅是地址?
  • 取决于您希望数据最终如何显示,但您可以在 TR 中的数据地址旁边添加更多数据字段。将更新答案。
  • 使用电话和地址对象编辑的答案。我不知道你所有的 $fish 对象在 PHP 中的样子,但你可以只对整个事物进行 json_encode,而不是单个地址、电话号码等。不过,如果它们中有更敏感的数据,请小心。
【解决方案2】:

这是一个功能齐全的版本,它可以从选中的行创建 CVS,并且还可以从 PHP 中获取 JSON,而不是通过网络发送表格

Live Demo

$("#csv_all").on("click", function () {
    $(".csv").prop("checked", this.checked);
});
$("#makeCsv").on("click", function () {
    var csv = [];
    $(".csv:checked").each(function () {
        var row = [];
        $(this).parent().siblings().each(function () { // all TDs
            row.push('"' + $(this).text() + '"');
        });
        if (row.length > 0) csv.push(row.join(","));
    });
    $("#csv").val(csv.length > 0?csv.join("\n"):"");

});

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2016-10-14
    • 1970-01-01
    • 2019-09-19
    • 1970-01-01
    • 2017-04-03
    • 1970-01-01
    • 2023-03-09
    相关资源
    最近更新 更多