当我 select 复选框时保存行值

Question

我为我糟糕的英语道歉，我希望我能更好地解释自己。

Json文件：通过这段代码调用查看文件内容：

<? php
$ login = 'XL8T7924H9G9U1M99GTSVV9BHC2KYRFL';
$ password = '';
$ url = 'https://www.website.com/api/products?&output_format=JSON&display=full';
$ ch = curl_init ();
curl_setopt ($ ch, CURLOPT_URL, $ url);
curl_setopt ($ ch, CURLOPT_RETURNTRANSFER, 1);
curl_setopt ($ ch, CURLOPT_HTTPAUTH, CURLAUTH_BASIC);
curl_setopt ($ ch, CURLOPT_USERPWD, "$ login: $ password");
$ result = curl_exec ($ ch);
curl_close ($ ch);
$ json = json_decode ($ result, true);
/ echo ($ result);
?>

结果显示为数据表此代码

<form action = "" method = "post">
<table id = "example" class = "table table-striped table-bordered zero-configuration">
<thead>
<tr>
<th class = "th-sm"> # </th>
<th class = "th-sm"> Name </th>
<th class = "th-sm"> Description </th>
<th class = "th-sm"> Short Description </th>
<th class = "th-sm"> Image </th>
<th class = "th-sm"> Activate </th>
</tr>
</thead>
<tbody>
<div class = "form-group" style = "text-align: -webkit-center;">
<div class = "form-check form-check-inline">
<? php
foreach ($ json ['products'] as $ data)
{
echo "<tr>";
echo "<td>". $ data ['id']. "</td>";
echo "<td>". $ data ['name']. "</td>";
echo "<td>". $ data ['description']. "</td>";
echo "<td>". $ data ['description_short']. "</td>";
echo "<td>". '<img src = "http://www.website.com/'.$data [" id_default_image "] .'- home_default /'.$ data [" link_rewrite "].'. jpg" class = "img-thumbnail "width =" 120 "height =" auto "/> ';
echo "<td> <input type = 'checkbox' name = 'checkbox' value = '1'> </td>";
echo "</tr>";
}?>
</tbody>
</table>
<input type = "submit" name = "submitp" id = "submitp" value = "submit">
</form>

通过复选框并提交我可以将信息保存在 txt 文件中这是代码

<? php
if (isset ($ _ POST ['submitp'])) {
$ id = "product id:". $ _ POST ['id']. "";
$ name = "product name:". $ _ POST ['name']. "";
$ description = "product description:". $ _ POST ['description']. "";
$ description_short = "short product description:". $ _ POST ['description_short']. "";
$ image = "product image:". $ _ POST ['image']. "";
$ file = fopen ("file.txt", "w +");
fwrite ($ file, $ id);
fwrite ($ file, $ name);
fwrite ($ file, $ description);
fwrite ($ file, $ short_description);
fwrite ($ file, $ image);
fclose ($ file);
}
?>

我知道我错了，但我不知道如何保存整个选定行。

您想实现的目标：通过复选框保存所选行及其 ID、名称、描述和简短描述

错误：none

它保存的内容：只有复选框的内容

希望我已经解释清楚了，谢谢你的帮助

Answer 1

当您提交时，它只会提交 inputs（以及一些其他输入类型，例如 select、textarea）。

<td>123</td>不会提交。

您可以添加隐藏输入，在您构建 table 的同时构建和填充，然后也会提交，例如：

<td>123<input type='hidden' name='id[0]' value='123'></td>

您需要为 name=id[0] 使用正确的格式，以确保 php 选取不同值的所有行；有不同的方法可以做到这一点。

这个 question/answer 的重要部分是包含一个隐藏的输入。

Answer 2

只有表单域被提交到服务器。 table 没有字段的单元格将不会在提交时发送

当您选中该框时，您可以有一组由 JavaScript 填充的隐藏字段，（稍后见）

或者您可以使用 AJAX

您有复选框，是否要保存多行？如果没有，请改用收音机

改变

   echo "<td>". $data ['id']. "</td>";
   echo "<td>". $data ['name']. "</td>";
   echo "<td>". $data ['description']. "</td>";
   echo "<td>". $data ['description_short']. "</td>";

到

   echo "<td data-key=\"id\">". $data ['id']. "</td>";
   echo "<td data-key=\"name\">". $data ['name']. "</td>";
   echo "<td data-key=\"description\">". $data ['description']. "</td>";
   echo "<td data-key=\"description_short\">". $data ['description_short']. "</td>";
   echo "<td data-key=\"image\">". '<img src = "http://www.website.com/'.$data [" id_default_image "] .'- home_default /'.$ data [" link_rewrite "].'. jpg" class = "img-thumbnail "width =" 120 "height =" auto "/> ';

然后使用

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})

$(function() {
  $("form").on("submit", function(e) {
    e.preventDefault(); // stop submission
    let details = $('input[name="checkbox"]:checked')
      .closest("tr") // parent row
      .find("td[data-key]") // only the ones with a key attribute
      .map(function() {
        return {
          [this.dataset.key]: this.textContent.trim() || $(this).find("img").attr("src")
        }
      })
      .get();
    console.log(details);
    if (details) {
      $.post("https://plungjan.name/SO/phponerow/save.php", JSON.stringify(details), function(data) {
        console.log("Details saved", data)
      })
    }
  })
})


My PHP is 

<?php 

header("Access-Control-Allow-Origin: *");
// $data = json_decode(file_get_contents('php://input'), true);

$data = file_get_contents('php://input');
echo $data;
?>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<form>
  <table>
    <tbody>
      <tr>
        <td data-key="id">ID 1</td>
        <td data-key="name">Name 1</td>
        <td data-key="description">Description 1 </td>
        <td data-key="description_short">Short 1</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite1.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 2</td>
        <td data-key="name">Name 2</td>
        <td data-key="description">Description 2 </td>
        <td data-key="description_short">Short 2</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite2.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
      <tr>
        <td data-key="id">ID 3</td>
        <td data-key="name">Name 3</td>
        <td data-key="description">Description 3 </td>
        <td data-key="description_short">Short 3</td>
        <td data-key="image"><img src="http://www.website.com/id_default_image/home_default/link_rewrite3.jpg" class="img-thumbnail" width="120" height="auto" />
          <td><input type="checkbox" name="checkbox" /></td>
      </tr>
    </tbody>
  </table>
  <input type="submit" />
</form>

对一个复选框使用隐藏字段（与上述相同的数据属性）：

<form>
   <input type="hidden" name="id">
   <input type="hidden" name="name">
   <input type="hidden" name="description">
   <input type="hidden" name="description_short">
   <input type="hidden" name="image" />

使用

$(function() {
  $("form").on("submit",function(e) {
    const form = this; // save the form
    $('input[name="checkbox"]:checked')
      .closest("tr") / parent row
      .find("td[key]") // only the ones with a key attribute
      .each(function() {
        form[key].value = this.textContent || $(this).find(img).attr("src");
      })    
  })
})

当我 select 复选框时保存行值

save row value when I select the checkbox

php

jquery

html-table