javascript - 我这里有一个按钮，尝试在 jdfiddle 中执行它，它可以工作，但在 html 中则不行

标签 javascript php jquery html

它在 JSFiddle 中有效，但在 notepad++ 中无效。为什么 ？ 仅第一个按钮有效，第二个按钮无效。我尝试更改 id 以使其唯一，但它也不起作用。也尝试过该类也不起作用。这里有什么问题吗？有人能帮我吗 ？真的需要有人可以帮助解决这个问题。提前谢谢您

JS 代码:

function getDate() {

    var sd = document.getElementById('start_date').value;
    var d = document.getElementById('duration').value;




    var date = new Date(sd);
    var newdate = new Date(date);
    var durations = parseInt(d);

    newdate.setDate((newdate.getDate() + durations)-1);


    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();

    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('end_date').value = someFormattedDate;




}

PHP 代码:

&sme_id=&pc_id="enctype="multipart/form-data"> 

<tr>
    <th style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
    <th style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>  
    <th></th>
</tr>
</thead>
<tbody>
<?
    //GET DATA FROM PROJECT_SCHEDULE
    /*$sql ="SELECT task_name,task_mark,marking,destination_marking,start_date,end_date FROM project_detail_new
            WHERE stage_id='1'";*/

    /*$sql = "SELECT ps.ps_id,ps.pc_id,ps.major_id,pms.major_name,ps.stage_id,psl.stage_name,ps.task_id,pst.task_name,
            ps.task_mark,ps.marking,ps.destination_marking,ps.days,ps.duration,ps.start_date,ps.end_date,ps.sys_id,ps.agency_id   
            FROM project_schedule ps 
            LEFT JOIN project_major_stage pms 
            ON ps.major_id=pms.major_id 
            LEFT JOIN project_stage_list psl 
            ON ps.stage_id=psl.stage_id 
            LEFT JOIN project_stage_task pst 
            ON ps.task_id=pst.task_id 
            WHERE ps.pc_id='$pc_id'";*/
    $sql= "SELECT DISTINCT(ps.major_id),pms.major_name 
           FROM project_schedule ps 
           LEFT JOIN project_major_stage pms 
           ON ps.major_id=pms.major_id 
           WHERE ps.pc_id='$pc_id' ";

    $select = mysql_query($sql);
    $i= 1;
    while($list =mysql_fetch_array($select))
    {

        $major_name=$list['major_name'];
        $major_id=$list['major_id'];
?>
<tr>
    <td style ="font-family:century gothic"colspan="12"><strong><font color="black"><?echo $list['major_name'];?></font></strong></td>
</tr>

<?
    $sqla= "SELECT DISTINCT (ps.stage_id),psl.stage_name,pms.major_name
            FROM project_schedule ps
            LEFT JOIN project_stage_list psl
            ON ps.stage_id=psl.stage_id
            LEFT JOIN project_major_stage pms
            ON ps.major_id=pms.major_id
            WHERE ps.pc_id=1 AND pms.major_id='$major_id'";

    $selecta=mysql_query($sqla);
    while($lista =mysql_fetch_array($selecta))
    {

        $stage_name=$lista['stage_name'];
        $stage_id=$lista['stage_id'];
?>
<tr>
<td></td>
<td style="font-family:centruy-gothic" colspan="10"<strong><font color="black"><?echo $lista['stage_name'];?></font></strong></td>
</tr>


<?  
    $sqlb ="SELECT ps.*,pst.task_name,psl.stage_name
            FROM project_schedule ps 
            LEFT JOIN project_stage_task pst
            ON ps.task_id=pst.task_id 
            LEFT JOIN project_stage_list psl
            ON ps.stage_id=psl.stage_id
            WHERE ps.pc_id=1 AND psl.stage_id='$stage_id'";

    $selectb =mysql_query($sqlb);

    while($listb=mysql_fetch_array($selectb))
    {

        $ps_id=$listb['ps_id'];
        $task_name=$listb['task_name'];
        $task_mark=$listb['task_mark'];
        $marking=$listb['marking'];
        $destination_marking=$listb['destination_marking'];
        $days=$listb['days'];
        $duration=$listb['duration'];
        $start_date=$listb['start_date'];
        $end_date=$listb['end_date'];


?>

<!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
<tr>
<td></td>
<td></td>

 <td style="font-family:century-gothic">
  <strong>
    <font color="black">
      <?echo $listb['task_name'];?>


    </font>
  </strong>
</td>

<td>
  <input type="text" id="task_mark1" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>

<td>
  <input type="text"  id="marking1" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>

<td>
  <input type="text" id="destination_marking1" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>

<td>
  <input type="text" id="days1" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>

<td>
  <input type="text" id="duration1" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>

<td>
  <input type="text" id="start_date1" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>

<td>
  <input type="text" id="end_date1" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>

<td align="center">

  <input type="button" id ="btn1" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>

</td>

</tr>

<!--------------------------------------------------------------------------------------------------------------------------------------->
 <td>
  <input type="text" id="task_mark2" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
</td>

<td>
  <input type="text"  id="marking2" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
</td>

<td>
  <input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
</td>

<td>
  <input type="text" id="days2" class="days" name="days" value="<? echo $listb['days'];?>" />
</td>

<td>
  <input type="text" id="duration2" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
</td>

<td>
  <input type="text" id="start_date2" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
</td>

<td>
  <input type="text" id="end_date2" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
</td>

<td align="center">

  <input type="button" id ="btn2" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>

</td>

</tr>
<?
    }}}
?>

<tr>
    <td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>     
</tr>
</form>

最佳答案 

function getDate(id) {
    id = id.match(/\d+/);
    var sd = document.getElementById('start_date'+ id).value;
    var d = document.getElementById('duration' + id).value;
    var date = new Date(sd);
    var newdate = new Date(date);
    var durations = parseInt(d);
    newdate.setDate((newdate.getDate() + durations)-1);
    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('end_date' + id).value = someFormattedDate;
}
<table>
  <thead>
    <tr>
      <th style="font-family:century gothic">
        <strong><font color="black">Major</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Stage</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Task</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Marking</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Days</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Duration</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Start</font></strong></th>
      <th style="font-family:century gothic"><strong><font color="black">Finish</font></strong></th>  
      <th></th>
    </tr>
  </thead>
  <tbody>
    <?
//GET DATA FROM PROJECT_SCHEDULE
/*$sql ="SELECT task_name,task_mark,marking,destination_marking,start_date,end_date FROM project_detail_new
WHERE stage_id='1'";*/

/*$sql = "SELECT ps.ps_id,ps.pc_id,ps.major_id,pms.major_name,ps.stage_id,psl.stage_name,ps.task_id,pst.task_name,
ps.task_mark,ps.marking,ps.destination_marking,ps.days,ps.duration,ps.start_date,ps.end_date,ps.sys_id,ps.agency_id   
FROM project_schedule ps 
LEFT JOIN project_major_stage pms 
ON ps.major_id=pms.major_id 
LEFT JOIN project_stage_list psl 
ON ps.stage_id=psl.stage_id 
LEFT JOIN project_stage_task pst 
ON ps.task_id=pst.task_id 
WHERE ps.pc_id='$pc_id'";*/
$sql= "SELECT DISTINCT(ps.major_id),pms.major_name 
FROM project_schedule ps 
LEFT JOIN project_major_stage pms 
ON ps.major_id=pms.major_id 
WHERE ps.pc_id='$pc_id' ";

$select = mysql_query($sql);
$i= 1;
while($list =mysql_fetch_array($select))
{

$major_name=$list['major_name'];
$major_id=$list['major_id'];
?>
    <tr>
      <td style ="font-family:century gothic" colspan="12">
        <strong>
          <font color="black">
            <? echo $list['major_name'];?>
          </font>
        </strong>
      </td>
    </tr>

    <?
$sqla= "SELECT DISTINCT (ps.stage_id),psl.stage_name,pms.major_name
FROM project_schedule ps
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
LEFT JOIN project_major_stage pms
ON ps.major_id=pms.major_id
WHERE ps.pc_id=1 AND pms.major_id='$major_id'";

$selecta=mysql_query($sqla);
while($lista =mysql_fetch_array($selecta))
{

$stage_name=$lista['stage_name'];
$stage_id=$lista['stage_id'];
?>
    <tr>
      <td></td>
      <td style="font-family:centruy-gothic" colspan="10">
        <strong>
          <font color="black">
          <?echo $lista['stage_name'];?>
          </font>
        </strong>
      </td>
    </tr>


    <?  
$sqlb ="SELECT ps.*,pst.task_name,psl.stage_name
FROM project_schedule ps 
LEFT JOIN project_stage_task pst
ON ps.task_id=pst.task_id 
LEFT JOIN project_stage_list psl
ON ps.stage_id=psl.stage_id
WHERE ps.pc_id=1 AND psl.stage_id='$stage_id'";

$selectb =mysql_query($sqlb);

while($listb=mysql_fetch_array($selectb))
{

$ps_id=$listb['ps_id'];
$task_name=$listb['task_name'];
$task_mark=$listb['task_mark'];
$marking=$listb['marking'];
$destination_marking=$listb['destination_marking'];
$days=$listb['days'];
$duration=$listb['duration'];
$start_date=$listb['start_date'];
$end_date=$listb['end_date'];


?>

    <!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
    <tr>
      <td></td>
      <td></td>

      <td style="font-family:century-gothic">
        <strong>
          <font color="black">
            <?echo $listb['task_name'];?>
          </font>
        </strong>
      </td>
      <td>
        <input type="text" id="task_mark1" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
      </td>
      <td>
        <input type="text"  id="marking1" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
      </td>
      <td>
        <input type="text" id="destination_marking1" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
      </td>
      <td>
        <input type="text" id="days1" class="days" name="days" value="<? echo $listb['days'];?>" />
      </td>
      <td>
        <input type="text" id="duration1" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
      </td>
      <td>
        <input type="text" id="start_date1" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
      </td>
      <td>
        <input type="text" id="end_date1" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
      </td>
      <td align="center">
        <input type="button" id ="btn1" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
      </td>
    </tr>

    <!--------------------------------------------------------------------------------------------------------------------------------------->
    <td>
      <input type="text" id="task_mark2" class="task_mark" name="task_mark" value="<? echo $listb['task_mark'];?>" />
    </td>
    <td>
      <input type="text"  id="marking2" class="marking" name="marking" value="<? echo $listb['marking'];?>" />
    </td>
    <td>
      <input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="<? echo $listb['destination_marking'];?>" />
    </td>
    <td>
      <input type="text" id="days2" class="days" name="days" value="<? echo $listb['days'];?>" />
    </td>
    <td>
      <input type="text" id="duration2" class="duration" name="duration" value="<? echo $listb['duration'];?>" />
    </td>
    <td>
      <input type="text" id="start_date2" class="start_date" name="start_date" value="<? echo $listb['start_date'];?>" />
    </td>
    <td>
      <input type="text" id="end_date2" class="end_date" name="end_date" value="<? echo $listb['end_date'];?>" />
    </td>
    <td align="center">
      <input type="button" id ="btn2" value="GENERATE" name="action" class ="submit-green" onclick="getDate(this.id)"/>
    </td>
  </tr>
<?
}}}
?>

<tr>
  <td colspan=5 align="center">
    <input class="submit-green" type="submit" value="Save" />
  </td>     
</tr>
</form>

您可以按照以下方式执行此操作:使表中每一行的所有 id 都不同，从 1,2,3...等增加末尾的数字。例如 btn1、btn2 等。然后在 HTML 代码中将 onclick="getDate()"更改为 onclick="getDate(this.id)"。并使用下面的 JavaScript 代码并对您的代码进行一些更改。

Javascript 代码:

function getDate(id) {
    id = id.match(/\d+/);
    var sd = document.getElementById('start_date'+ id).value;
    var d = document.getElementById('duration' + id).value;
    var date = new Date(sd);
    var newdate = new Date(date);
    var durations = parseInt(d);
    newdate.setDate((newdate.getDate() + durations)-1);
    var dd = newdate.getDate();
    var mm = newdate.getMonth()+1;
    var y = newdate.getFullYear();
    var someFormattedDate = y + '-' + mm + '-' + dd;
    document.getElementById('end_date' + id).value = someFormattedDate;
}

HTML 代码:

<table>
  <thead>
    <tr>
      <td colspan=11 align="center"><input class="submit-green" type="submit" value="Save" /></td>
    </tr>
    <tr>
      <td style="font-family:century gothic"><strong><font color="black">Major</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Stage</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Task</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Task Mark</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Marking</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Destination Marking</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Days</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Duration</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Start</font></strong></td>
      <td style="font-family:century gothic"><strong><font color="black">Finish</font></strong></td>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td style="font-family:century gothic" colspan="12"><strong><font color="black">Initial</font></strong></td>
    </tr>
    <tr>
      <td></td>
      <td style="font-family:century gothic" colspan="11"><strong><font color="black">Prelim</font></strong></td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td style="font-family:century gothic"><strong><font color="black">Side Rail</font></strong></td>

      <!----THIS IS THE PHP CODE TO BE USED TO CALCULATE THE END DATE BASED ON START DATE ENTERED AND DURATION PICKED FROM DATABASE-->
      <td>
        <input type="text" id="task_mark1" class="task_mark" value="" />
      </td>
      <td>
        <input type="text" id="marking1" class="marking" value="" />
      </td>
      <td>
        <input type="text" id="destination_marking1" class="destination_marking" value="" />
      </td>
      <td>
        <input type="text" id="days1" class="days" value="" />
      </td>
      <td>
        <input type="text" id="duration1" class="duration" value="" />
      </td>
      <td>
        <input type="text" id="start_date1" class="start_date" value="" />
      </td>
      <td>
        <input type="text" id="end_date1" class="end_date" value="" />
      </td>

      <td align="center">

        <input type="button" id="btn1" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
      </td>
    </tr>
    <tr>
      <td></td>
      <td></td>
      <td style="font-family:century gothic"><strong><font color="black">Bina Stor</font></strong></td>

      <td>
        <input type="text" id="task_mark2" class="task_mark" name="task_mark" value="" />
      </td>
      <td>
        <input type="text" id="marking2" class="marking" name="marking" value="" />
      </td>
      <td>
        <input type="text" id="destination_marking2" class="destination_marking" name="destination_marking" value="" />
      </td>
      <td>
        <input type="text" id="days2" class="days" name="days" value="" />
      </td>
      <td>
        <input type="text" id="duration2" class="duration" name="duration" value="" />
      </td>
      <td>
        <input type="text" id="start_date2" class="start_date" name="start_date" value="" />
      </td>
      <td>
        <input type="text" id="end_date2" class="end_date" name="end_date" value="" />
      </td>
      <td align="center">
        <input type="button" id="btn2" value="GENERATE" class="btnGenerate" onclick="getDate(this.id)" />
      </td>
    </tr>
    <tr>
      <td colspan=5 align="center"><input class="submit-green" type="submit" value="Save" /></td>
    </tr>
  </tbody>
</table>

关于javascript - 我这里有一个按钮，尝试在 jdfiddle 中执行它，它可以工作，但在 html 中则不行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/45901395/

上一篇：javascript - AJAX返回的元素无法被点击

下一篇：javascript - 是否可以在 jQuery-DataTables 中显示 HTML 源数据的 spinner/loading-msg？

相关文章：

javascript - jQuery ajax 加载或更新后，我丢失了鼠标悬停事件

javascript - 将 angular js1.x 过滤器转换为 angular js 2.0 管道

javascript - 使用 javascript 验证密码

php - 输入表单后如何发送电子邮件？

javascript - 在 React-Native 中处理服务调用的通用基类方法

javascript - 由于 CORS，Hubspot API 无法正常工作

php - 带有多个可选搜索词的参数化查询

jQuery 发布对象

javascript - `.click(handler())` 和 `.click(handler)` 之间的区别

javascript - DataTable - 响应式自定义断点

©2024 IT工具网  联系我们