div实现子表信息增加效果

最新推荐文章于 2024-05-20 16:58:10 发布

fjfdszj

最新推荐文章于 2024-05-20 16:58:10 发布

阅读量598

点赞数

CC 4.0 BY-SA版权

文章标签： div input class calendar string function

本文链接：https://blog.youkuaiyun.com/fjfdszj/article/details/2970117

本文介绍了一种用于记录车辆中途站点信息的表格设计，包括出车地、出车时间、中转站、中转站时间等关键信息，并提供了动态添加和删除表格行的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

    </head>
<body>
<table class='simple' style='width: 98%' align='center' id="maintaindetailinfo">
  <thead>
   <tr>
    <th colspan='10'>中途站点信息登记</th>
   </tr>
  </thead>
  <tbody id="maintaintbody">
   <tr>
    <td align='center'>出车地</td>
    <td align='center'>出车时间</td>
    <td align='center'>中转站</td>
    <td align='center'>中转站时间</td>
    <td align='center'>行车公里数(米)</td>
    <td align='center'>油耗量</td>
    <td align='center'>油耗金额</td>
    <td align='center'>起点管理人员</td>
    <td align='center'>中转站管理人员</td>
    <td align='center'>
     <a style="cursor: hand" onclick="add_maintaindetail();">添加</a>
    </td>
   </tr>
   <input type="hidden" name="roldInfo.num" value="1">
   <tr>
    <td valign="top" align='center'>
     <input class='text_input check' verify='string' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.firstLocus" type="text" size="10">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='date' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.firstDate" type="text" onfocus="calendar()" size="9">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='string' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.transferLocur" type="text" size="10">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='date' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.transferDate" type="text" onfocus="calendar()" size="9">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.runMileage" type="text" size="8">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.useOilNum" type="text" size="8">
    </td>
    <td valign="top" align='center'>
     <input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name="roldInfo.useOilCharge" type="text" size="8">
    </td>
    <td valign="top" align='center'>
     <input class='text_input' name="roldInfo.firstManager" type="text" size="10">
    </td>
    <td valign="top" align='center'>
     <input class='text_input' name="roldInfo.transferManager" type="text" size="10">
    </td>
    <td align="center" align='center'>
     <a onclick='del_maintaindetail();' style='cursor: hand'>删除</a>
    </td>
   </tr>

  </tbody>
  <TFOOT id="maintaindetailTfoot">
  </TFOOT>
</table>
</form>

//改变数量标签值
  var rowNum = Math.floor(document.all("roldInfo.num").value);
  rowNum ++;
  document.all("roldInfo.num").value = rowNum;//roldInfo

//得到body
var oBody=document.all("maintaintbody");//mobileTbody

//选择增加的标签位置
document.all("maintaindetailinfo").insertBefore(oBody,document.all("maintaindetailTfoot"));

//插入行
var myTR =oBody.insertRow();

//插入单元格
  var myTD2=myTR.insertCell();
   myTD2.innerHTML="<div align='center'><input class='text_input check' verify='string' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.firstLocus' type='text'   size='10'></div>";
  var myTD3=myTR.insertCell();
   myTD3.innerHTML="<div align='center'><input class='text_input check' verify='date' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.firstDate' type='text'   onfocus='calendar()' size='9'></div>";
  var myTD4=myTR.insertCell();
   myTD4.innerHTML="<div align='center'><input class='text_input check' verify='string' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.transferLocur' type='text'   size='10'></div>";
  var myTD5=myTR.insertCell();
   myTD5.innerHTML="<div align='center'><input class='text_input check' verify='date' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.transferDate' type='text'   onfocus='calendar()' size='9'></div>";
  var myTD6=myTR.insertCell();
   myTD6.innerHTML="<div align='center'><input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.runMileage' type='text'   size='8'></div>";
  var myTD7=myTR.insertCell();
   myTD7.innerHTML="<div align='center'><input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.useOilNum' type='text'   size='8'></div>";
  var myTD8=myTR.insertCell();
   myTD8.innerHTML="<div align='center'><input class='text_input check' verify='double+' required='true' requiredColor='#ffffff' shade='true' name='roldInfo.useOilCharge' type='text'   size='8'></div>";
  var myTD9=myTR.insertCell();
   myTD9.innerHTML="<div align='center'><input class='text_input' name='roldInfo.firstManager' type='text'   size='10'></div>";
  var myTD10=myTR.insertCell();
   myTD10.innerHTML="<div align='center'><input class='text_input' name='roldInfo.transferManager' type='text'   size='10'></div>";
  var myTD11=myTR.insertCell();
   myTD11.innerHTML="<div align='center'>"+
      " <a onclick='del_maintaindetail();' style='cursor:hand'>删除</a>"+
      "</div>";
}

//删除当前行