Javascript PHP-如何将html表格单元格值添加到MYSQL数据库

首先，我有一个空表（首先，它只包含表标题）和4个输入字段；这4个输入字段的值作为表的第一行出现。如果再次这样做，表格的第二行将被归档。 此表包含第5列，该列有一个删除相应行的按钮。 我想告诉你，这两个按钮工作正常。 我真正想要的是，如果有人完成了行添加；所有行值都应作为行进入数据库。 请引导我做这件事

添加precrition.php

<form method="POST" >
<div class="row">
    <div class="col-md-4">
        <label for="fullName">Appointment Number</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="appNumber" id="appNumber" class="form-control" placeholder="Appointment Number" required="">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="nic">Patient's Name</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="pName" id="pName" class="form-control" placeholder="Patinet's Name">
            </div>
        </div>
    </div>
    <div class="col-md-4">
        <label for="nic">Patient's Age</label>
        <div class="form-group">
            <div class="form-line">
                <input type="text" name="pAge" id="pAge" class="form-control" placeholder="Patient's Age">
            </div>
        </div>
    </div>
</div>

<div class="form-group">
    <!-- Multiple CKEditor -->
    <label for="nic">Present Complaint</label>
        <textarea name="pc" class="ckeditor"></textarea>
        <script type="text/javascript">
            CKEDITOR.replace( 'editor1' );
            CKEDITOR.add            
        </script>
        <br><br>
    <label for="nic">Examination</label>
    <textarea name="examination" class="ckeditor"></textarea>
        <script type="text/javascript">
            CKEDITOR.replace( 'editor2' );
            CKEDITOR.add            
        </script>
</div>

<label for="Treatment"><h4>Treatment</h4></label>

<div class="row">
    <div class="col-md-3">
        <label for="doctorName">Drug Name</label>
            <select id="drugId" class="form-control show-tick" data-live-search="true" name="drugId" id="doctorId">
                <option value="0"> Select Drug</option>
                 <?php $ret=mysqli_query($con,"select * from doctors");
                while($row=mysqli_fetch_array($ret))
                {
                ?>
                <option value="<?php echo htmlentities($row['id']);?>">
                    <?php echo htmlentities($row['doctorName']);?>
                </option>
            <?php } ?>
            </select>
    </div>
    <div class="col-md-3">
        <label for="nic">Dose</label>
        <div class="form-group">
            <div class="form-line">
                 <input type="text" name="dose" id="dose" class="form-control" placeholder="Eg: 1+0+1  2+0+2">
            </div>
        </div>
    </div> 
     <div class="col-md-3">
        <label for="nic">Days</label>
        <div class="form-group">
            <div class="form-line">
                 <input type="text" name="days" id="days" class="form-control" placeholder="Eg: 1, 2, 5">
            </div>
        </div>
    </div>  
    <div class="col-md-3">
        <label for="nic">External Medicine</label>
        <div class="form-group">
            <div class="form-line">
                <textarea rows="1" class="form-control no-resize auto-growth" placeholder="External Medicine" id="eMedicine"></textarea>
        </div>
        </div>
    </div>        
</div>
<input type="button" class="btn btn-success m-t-10 waves-effect" onclick="addRow();" value="Add Medicine">
<div class="body">
    <div class="table-responsive">
        <table class="table table-bordered table-striped table-hover dataTable js-exportable" name="drugTable" id="drugTable">
            <thead>
                <tr>
                    <th>Drug Name</th>
                    <th>Dose</th>
                    <th>Days</th>
                    <th>External Medicine</th>
                    <th>Action</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                </tr>
            </tbody>
        </table>
    </div>
</div>
<label for = 'docfee'>Doctor Fee</label>
<div class="form-group">
    <div class="form-line">
        <input type="text" name="docFee" id="docFee" class="form-control">
    </div>
</div>

<br><br><br><br>
<button class="btn btn-primary m-t-10 waves-effect" type="submit" name="submit">ADD PRESCRIPTION</button></form>

<script> 

    function deleteRow()
    {
        $('table').on('click', 'input[type="button"]', function(e){
           $(this).closest('tr').remove()
            })
    }

        function addRow()
        {
            // get input values
            var drugName = document.getElementById('drugId').value;
            var dose = document.getElementById('dose').value;
            var days = document.getElementById('days').value;
            var eMedicine = document.getElementById('eMedicine').value;
            var action = "<input type='button' class='btn btn-danger m-t-4 waves-effect' id='del' name='del' onclick='deleteRow()' value='DELETE'>";

              // get the html table
              // 0 = the first table
              var table = document.getElementsByTagName('table')[0];

              // add new empty row to the table
              // 0 = in the top 
              // table.rows.length = the end
              // table.rows.length/2+1 = the center
              var newRow = table.insertRow(table.rows.length);

              // add cells to the row
              var cel1 = newRow.insertCell(0);
              var cel2 = newRow.insertCell(1);
              var cel3 = newRow.insertCell(2);
              var cel4 = newRow.insertCell(3);
              var cel5 = newRow.insertCell(4);

              // add values to the cells
              cel1.innerHTML = drugName;
              cel2.innerHTML = dose;
              cel3.innerHTML = days;
              cel4.innerHTML = eMedicine;
              cel5.innerHTML = action;

              document.getElementById("drugId").value = "0";
              document.getElementById("dose").value = "";
              document.getElementById("days").value = "";
              document.getElementById("eMedicine").value = "";
        }

</script>

预约号码
病人姓名
病人年龄
提出申诉
CKEDITOR.replace（'editor1'）；
编辑添加



检查
CKEDITOR.replace（'editor2'）；
编辑添加
治疗
药名
选择药物
也许你们可以用我的例子，我关注的是表，而另一个你们可以添加一些输入或者其他，这是纯javascript的产物

希望你能帮上忙

在第一张图片上，它是你的药店的库存，在图片下方

你可以添加和删除行，你不能更新主题，因为这可能会浪费更多的时间，如果你错了就删除它们

在此之后，您可以将药物保存到数据库中，我建议您使用PDO

为什么?？因为它更节省（我想是^ ^，），而且还支持多个查询。看到这个了吗

确定事务后，可以保存它，并将其重定向到medicSave.php=>我的示例。第二部分见下图。

对于上面的图片，我只是将结果显示为JSON。在此之后，您可以直接将JSON数据存储到数据库中，当然可以使用QUERY^\u^

哦，如果您需要代码，请参见下面的
index.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link rel="stylesheet" type="text/css" href="../../foundlose/vendor/meotip/style.css">
</head>
<body>
<div class="container">
    <h1>List Of Medicine</h1>
    <form method="post" action="medicSave.php">
        <div class="indef">
            <table>
                <thead>
                    <tr>
                        <th>Drug Name</th>
                        <th>Dose</th>
                        <th>Days</th>
                        <th>External Medicine</th>
                        <th>Action</th>
                    </tr>
                </thead>
                <tbody id="dataset"></tbody>
            </table>
        </div>
        <div class="indef">
            <input type="hidden" name="totalRow" id="totalRow" value="0">
            <button type="submit" class="btn btn-process">Save Medicine</button>
        </div>
    </form>
    <hr>
    <div class="indef">
        <label for="drugName"><span>Drug Name :</span>
            <input type="text" id="drugName" placeholder="Insert Drug Name">
        </label>
    </div>
    <div class="indef">
        <label for="dose"><span>Dose :</span>
            <input type="text" id="dose" placeholder="Insert Dose">
        </label>
    </div>
    <div class="indef">
        <label for="days"><span>Days :</span>
            <input type="text" id="days" placeholder="Insert Days">
        </label>
    </div>
    <div class="indef">
        <label for="externalMedicine"><span>External Medicine :</span>
            <input type="text" id="externalMedicine" placeholder="Insert External Medicine">
        </label>
    </div>
    <div class="indef">
        <button id="add" class="btn btn-info">Add medicine list</button>
    </div>
</div>
<script type="text/javascript">

    var dataset = document.getElementById('dataset'),
    drugName = document.getElementById('drugName'),
    dose = document.getElementById('dose'),
    days = document.getElementById('days'),
    externalMedicine = document.getElementById('externalMedicine'),
    add = document.getElementById('add'),
    totalRow = document.getElementById('totalRow');

    add.onclick = function(){

        var getRow = dataset.getElementsByTagName('tr').length,
        trDataset = document.createElement('tr'),
        tdDrugName = document.createElement('td'),
        tdDose = document.createElement('td'),
        tdDays = document.createElement('td'),
        tdExternalMedicine = document.createElement('td'),
        inDrugName = document.createElement('input'),
        inDose = document.createElement('input'),
        inDays = document.createElement('input'),
        inExternalMedicine = document.createElement('input'),
        tdAction = document.createElement('td');

        /* Initiate Column Drugname Section */

        inDrugName.setAttribute('type','hidden');

        inDrugName.setAttribute('id','drugname_' + getRow);

        inDrugName.value = drugName.value;

        inDrugName.name = 'drugname_' + getRow;

        tdDrugName.textContent = drugName.value;

        tdDrugName.appendChild(inDrugName);

        /* End Column Drugname Section */

        /* Initiate Column Dose Section*/

        inDose.setAttribute('type','hidden');

        inDose.setAttribute('id','dose_' + getRow);

        inDose.value = dose.value;

        inDose.name = 'dose_' + getRow;

        tdDose.textContent = dose.value;

        tdDose.appendChild(inDose);

        /* End Column Dose Section */

        /* Initiate Column Days Section*/

        inDays.setAttribute('type','hidden');

        inDays.setAttribute('id','days_' + getRow);

        inDays.value = days.value;

        inDays.name = 'days_' + getRow;

        tdDays.textContent = days.value;

        tdDays.appendChild(inDays);

        /* End Column Days Section */

        /* Initiate Column External Medicine Section*/

        inExternalMedicine.setAttribute('type','hidden');

        inExternalMedicine.setAttribute('id','external_medicine_' + getRow);

        inExternalMedicine.value = externalMedicine.value;

        inExternalMedicine.name = 'external_medicine_' + getRow;

        tdExternalMedicine.textContent = externalMedicine.value;

        tdExternalMedicine.appendChild(inExternalMedicine);

        /* End Column External Medicine Section */

        /* Action */

        tdAction.textContent = 'Click At Row';

        /* End Action*/

        /* Initiate Each Row */

        trDataset.appendChild(tdDrugName);

        trDataset.appendChild(tdDose);

        trDataset.appendChild(tdDays);

        trDataset.appendChild(tdExternalMedicine);

        trDataset.appendChild(tdAction);

        /* Trigger To Select */

        trDataset.onclick = (function(){

            return function(){

                drugName.value = this.childNodes[0].getElementsByTagName('input')[0].value;

                dose.value = this.childNodes[1].getElementsByTagName('input')[0].value;

                days.value = this.childNodes[2].getElementsByTagName('input')[0].value;

                externalMedicine.value = this.childNodes[3].getElementsByTagName('input')[0].value;

                this.parentNode.removeChild(this);

                totalRow.value = dataset.getElementsByTagName('tr').length;

                drugName.focus();

            }

        }());

        /* Add Row To Dataset / Table */

        dataset.appendChild(trDataset);

        getRow++;

        /*Set Total Row, This Use for looping in medicSave.php*/

        totalRow.value = getRow;

        /* Reset Value Input*/

        drugName.value = '';

        dose.value = '';

        days.value = '';

        externalMedicine.value = '';

        drugName.focus();

    }

</script>
</body>
</html>


药品目录
药名
剂量
天
外用医学
行动
救药

药品名称：
剂量：
天：
外用药物：
添加药品清单
var dataset=document.getElementById（'dataset'），
drugName=document.getElementById（'drugName'），
dose=document.getElementById（'dose'），
天=document.getElementById（'days'），
externalMedicine=document.getElementById（'externalMedicine'），
add=document.getElementById（'add'），
totalRow=document.getElementById（'totalRow'）；
add.onclick=function（）{
var getRow=dataset.getElementsByTagName（'tr'）。长度，
trDataset=document.createElement（'tr'），
tdDrugName=document.createElement（'td'），
tdDose=document.createElement（'td'），
tdDays=document.createElement（'td'），
tdExternalMedicine=document.createElement（'td'），
inDrugName=document.createElement（'input'），
inDose=document.createElement（'input'），
inDays=document.createElement（'input'），
InternalMedicine=document.createElement（'input'），
tdAction=document.createElement（'td'）；
/*启动列名称部分*/
setAttribute（'type'，'hidden'）；
setAttribute（'id'，'drugname_uu'+getRow）；
inDrugName.value=drugName.value；
inDrugName.name='drugname_uu'+getRow；
tdDrugName.textContent=drugName.value；
tdDrugName.appendChild（inDrugName）；
/*结束列名称部分*/
/*启动柱剂量段*/
setAttribute（'type'，'hidden'）；
inDose.setAttribute（'id'，'dose_'+getRow）；
吲哚值=剂量值；
inDose.name='dose_'+getRow；
tdDose.textContent=dose.value；
t儿童剂量（吲哚）；
/*端柱剂量段*/
/*启动列日部分*/
setAttribute（'type'，'hidden'）；
setAttribute（'id'，'days.'+getRow）；
inDays.value=days.value；
inDays.name='days_uu'+getRow；
tdDays.textContent=days.value；
TDD天。儿童（inDays）；
/*结束列天数部分*/
/*启动外部医学组*/
internalmedicine.setAttribute（'type'，'hidden'）；
internalmedicine.setAttribute（'id'，'externalmedicine'+getRow）；
非外部医学.value=外部医学.value；
inExternalMedicine.name='externalmedicine'+getRow；
tdExternalMedicine.textContent=externalMedicine.value；
tdExternalMedicine.appendChild（非外部医学）；
/*端柱外用药组*/
/*行动*/
tdAction.textContent='单击行'；
/*结束动作*/
/*启动每一行*/
trDataset.appendChild（tdDrugName）；
trDataset.appendChild（tdDose）；
trDataset.appendChild（tdDays）；
trDataset.appendChild（tdExternalMedicine）；
trDataset.appendChild（tdAction）；
/*触发选择*/
trDataset.onclick=（函数（）{
返回函数（）{
drugName.value=this.childNodes[0]。getElementsByTagName（'input'）[0]。值；
dose.value=this.childNode
<?php
//for this your can store this data to your table ^_^
header('Content-Type: application/json');
echo json_encode($_POST,JSON_PRETTY_PRINT);

?>