当前位置: 亚洲城ca88 > 计算机网络 > 正文

js_脚本之家,js动态增进表格逐行增加计算机网络

时间:2019-12-11 22:20来源:计算机网络
世家先看看页面效果啊,当当当当``````````````````````` js动态增加表格逐行增加、删除、遍历取值的实例代码,js逐行 至于js对表格进行逐行增加,前些天不改其乐收拾了须臾间:新建三个

世家先看看页面效果啊,当当当当```````````````````````

js动态增加表格逐行增加、删除、遍历取值的实例代码,js逐行

至于js对表格进行逐行增加,前些天不改其乐收拾了须臾间:新建三个html文件(未有编辑器的能够新建一个demo.txt文件,然后改后缀名叫demo.html),把上边代码整爱护进去就能够。

计算机网络,效果包蕴:表格增多风华正茂行,表格删除风度翩翩行,表格遍历取值等。

点击表达:点击增多按键,则表格增多黄金年代行,可举行录入,删除按键,可去除当前进,别的行不影响。删除可能增多,每行的的数码都会自行生成,套餐和价格是<input/>,内容是

<textarea></textarea>,点击保存开关的时候,遍历表格中有着行,把全体行的多少抽出来弹框弹出展现,前期可依据供给传递到后台举行管理。

效果图:

计算机网络 1

源代码:

<!--
  Creator: WangPeng
  CreateTime : 2018-01-25
  去年今日此门中,人面桃花相映红。
  人面不知何处去,桃花依旧笑春风。
-->
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>动态增加表格</title>
</head>
<style>
  td /*设置表格文字左右和上下居中对齐*/
  {
    vertical-align: middle;
    text-align: center;
    padding: 9px;
  }
  textarea{
    min-height: 60px;
    min-width: 200px;
  }
</style>
<script type="text/javascript">
  function del(obj){
    if(document.getElementById('tbodyid').children.length>1){
    var trid=obj.parentNode.parentNode.id;
    var objtr=document.getElementById(trid);
    document.getElementById('tbodyid').removeChild(objtr);
    var tbody=document.getElementById('tbodyid');
    var countchildren=tbody.childElementCount;
    for (var i=0;i<countchildren;i  ){
      tbody.children[i].children[0].innerHTML=i 1;
    }
    }
    else{
      alert("请不要全部删除");
    }
  }
  function add(){
  var trid = new Date().getTime();
  var packageid=trid 'packageid';
  var countid=trid 'countid';
  var priceid=trid 'priceid';
  var objtr=document.createElement('tr');
  objtr.id=trid;
  objtr.innerHTML="<td></td> "  
    "      <td><input id='" trid "packageid'></td> "  
    "      <td><textarea id='" trid "countid'></textarea></td> "  
    "      <td><input id='" trid "priceid'></td> "  
    "      <td><button type='button' onclick='del(this)'>删除</button></td>";
    document.getElementById("tbodyid").appendChild(objtr);
    var tbodyobj=document.getElementById('tbodyid');
    var countchildren=tbodyobj.childElementCount;
    for (var i=0;i<countchildren;i  ){
      tbodyobj.children[i].children[0].innerHTML=i 1;
    }
  }
  function save(){
    var tbodyobj=document.getElementById('tbodyid');
    var countchildren=tbodyobj.childElementCount;
    var trid="";
    var packageid="";
    var countid="";
    var priceid="";
    var list=new Array();
    for (var i=0;i<countchildren;i  ){
      trid=tbodyobj.children[i].id;
      packageid=trid "packageid";
      countid=trid "countid";
      priceid=trid "priceid";
      var map={
      "套餐":document.getElementById(packageid).value,
      "内容":document.getElementById(countid).value,
      "价格":document.getElementById(priceid).value
      }
      list.push(map);
    }
    console.log("list:",list);
    alert(JSON.stringify(list));
  }
</script>
<body>
<div>
  <div style="width: 80%;margin: 10%">
  <table border="1" bordercolor="#a0c6e5" style="border-collapse:collapse;" align="center" width="100%">
    <caption>动态增加表格</caption>
    <thead>
    <tr>
      <th width="5% ">序号</th>
      <th width="20%">套餐</th>
      <th width="30%">内容</th>
      <th width="10%">价格</th>
      <th width="10%">操作</th>
    </tr>
    </thead>
    <tbody id="tbodyid">
    <tr id="123">
      <td>1</td>
      <td><input id="123packageid"></td>
      <td><textarea id="123countid"></textarea></td>
      <td><input id="123priceid"></td>
      <td><button type="button" onclick='del(this)'>删除</button></td>
    </tr>
    </tbody>
  </table>
    <button type="button" onclick='add()'>添加</button>
    <button type="button" onclick='save()'>保存</button>
</div>
</div>
</body>
</html>

 js动态变化其余的也同理,可依据本身索要在钦赐地点创造协调所急需的要素。

总结

如上所述是我给大家介绍的js动态拉长表格逐行加多、删除、遍历取值的实例代码,希望对大家持有助于,即便大家有别的疑问请给笔者留言,笔者会及时回复大家的。在那也特别多谢大家对帮客之家网站的帮助!

关于js对表格进行逐行增加,前些天苦中作乐整理了风姿浪漫晃:新建三个html文件(未有...

图中第三个选题是小颖点击了"新添选题"开关,然后出来的,当您点击了"删除选项"或"删除选题"开关,就能够删除相应的拈轻怕重和选题.

html代码

选题:删除选题标题:正确答案:请在以下选项中,勾选出正确答案分值:选项:新增选项删除选项新增选题提交

js代码

export default {components: {},props: {},methods: {// &#26032;&#22686;&#36873;&#39064;addNewSubjectFun: function {var subjectDataMes = {};subjectDataMes.id = index 2;subjectDataMes.title = '';subjectDataMes.answer =[];subjectDataMes.score = 10;subjectDataMes.optionsData = [{id: 'A',options: ''}];this.question.push;},// &#21028;&#26029;&#27599;&#20010;&#39064;&#30446;&#30340;&#20998;&#20540;&#19981;&#33021;&#23567;&#20110;&#38646;&#19988;&#19981;&#33021;&#22823;&#20110;&#19968;&#30334;scoreFun:function{if(this.question[index].score&lt;0){this.question[index].score=10;this.$root.tipStr = '&#36873;&#39064;"' this.question[index].title '"&#30340;&#20998;&#20540;&#19981;&#33021;&#23567;&#20110;&#38646;';}else if(this.question[index].score&gt;100){this.question[index].score=10;this.$root.tipStr = '&#36873;&#39064;"' this.question[index].title '"&#30340;&#20998;&#20540;&#19981;&#33021;&#22823;&#20110;&#19968;&#30334;';}},// &#21024;&#38500;&#36873;&#39064;deleteSubjectFun: function {this.question.splice;},// &#26032;&#22686;&#36873;&#39033;addNewOptionsFun: function(subjectIndex, opdtIndex) {var optionsDataMes = {};optionsDataMes.id =String.fromCharCode; //&#23558;id&#20174;&#25968;&#23383;&#36716;&#25442;&#25104;&#22823;&#20889;&#23383;&#27597;.optionsDataMes.options = '';var subjectDataMes = this.question[subjectIndex].optionsData;subjectDataMes.push;},// &#21024;&#38500;&#36873;&#39033;deleteOptionsFun: function(subjectIndex, opdtIndex) {var subjectDataMes = this.question[subjectIndex].optionsData;subjectDataMes.splice;},saveQuestionFun:function(){this.question;debugger;}},ready: function {return {question: [{id: 1,title: '',answer: [],score:10,optionsData: [{id: 'A',options: ''}],}],}}}

css代码

.mg1 {padding: 8px 0 0 113px;}.upper-latin {list-style-type: upper-latin;}input.form-control.options-input {display: inline-block; /*width: 499.16px;*/width: 100%;}.boder {border: 1px solid;background-color: #fff;border-radius: 4px;line-height: 34px;padding: 0 15px;}.blue {color: #2689cd;text-align: center;}label.red {color: #c9302c;}label.remove-pad {/*padding: 10px 20px 10px 15px;*/line-height: 34px;text-align: left;}.split-line {height: 10px;border-top: 2px dashed #E7E8EC;width: 900px;}.prompting-message {line-height: 34px;}.options-div {margin-left: 26px;margin-top: -25px;padding-bottom: 25px;}

以上所述是作者给大家介绍的Vue.js动态拉长、删除选题的实例代码,希望对我们有所扶持,如若大家有任何疑问请给本身留言,笔者会及时还原我们的。在这里也特别感激大家对剧本之家网址的支撑!

编辑:计算机网络 本文来源:js_脚本之家,js动态增进表格逐行增加计算机网络

关键词: 亚洲城ca88