選擇復選框時保存行值-有解無憂

我為我的英語不好道歉，我希望我能更好地解釋自己。

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、名稱、描述和簡短描述

錯誤：無

它保存的內容：僅復選框的內容

我希望我已經很好地解釋了自己，并感謝您的幫助

uj5u.com熱心網友回復：

只有表單域被提交到服務器。提交時不會發送沒有欄位的表格單元格

當您選中該框時，您可以使用 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");
      })    
  })
})

uj5u.com熱心網友回復：

當您提交時，它只提交inputs（以及一些其他輸入型別，如select, textarea）。

<td>123</td> 不會被提交。

您可以在構建表的同時添加隱藏輸入，構建和填充，然后也將被提交，例如：

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

您需要使用正確的格式name=id[0]來確保 php 選擇不同值的所有行；有不同的方法可以做到這一點。

這個問題/答案的基本部分是包含一個隱藏的輸入。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/363786.html

標籤：php 查询 html-table

上一篇：如何從fullcalender.js中洗掉“p”和“a”（用于“am”和“pm”）

下一篇：Django自動完成燈Select2小部件沒有出現