2. 程式人生 > >js動態表格新增一行刪除一行儲存一行

js動態表格新增一行刪除一行儲存一行

阿新 • • 發佈：2018-11-11
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<script language="javascript"> 
 //視窗表格增加一行
  function addNewRow(){
   var tabObj=document.getElementById("myTab");//獲取新增資料的表格
   var rowsNum = tabObj.rows.length;  //獲取當前行數
   //var colsNum=tabObj.rows[rowsNum-1].cells.length;//獲取行的列數
   
   var myNewRow = tabObj.insertRow(rowsNum);//插入新行
   //1checkbox
   var newTdObj1=myNewRow.insertCell(0);
   newTdObj1.innerHTML="<input type='checkbox' name='chkArr'   id='chkArr_"+rowsNum+"' style='width:20px' />";
   //2序號
   var newTdObj2=myNewRow.insertCell(1);
   newTdObj2.innerHTML="<input type='text'     name='nodecode' id='nodecode_"+rowsNum+"' style='width:40px' value='"+rowsNum+"'/>";
   //3節點名稱
   var newTdObj3=myNewRow.insertCell(2);
   newTdObj3.innerHTML="<input type='text'     name='nodename' id='nodename_"+rowsNum+"' style='width:140px' />";
   
   //4
   var newTdObj4=myNewRow.insertCell(3);
   newTdObj4.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
   
   var newTdObj5=myNewRow.insertCell(4);
   newTdObj5.innerHTML="<input type='text'     name='nodeper_"+rowsNum+"'   style='width:140px' />";
   
   
   var newTdObj6=myNewRow.insertCell(5);
   newTdObj6.innerHTML="<input type='button'    name='saveButton'  id='saveButton_"+rowsNum+"'  value='儲存'  onclick='saveData("+rowsNum+")' style='width:60px' />";
  }
//視窗表格刪除一行
  function removeRow(){
   var chkObj=document.getElementsByName("chkArr");
   var tabObj=document.getElementById("myTab");
   for(var k=0;k<chkObj.length;k++){
    if(chkObj[k].checked){
     tabObj.deleteRow(k+1);
     k=-1;
    }
   }
  }
  
  function saveData(rowsNum){
  var codeValue = document.getElementById("nodename_"+rowsNum).value;
  alert(codeValue);
  var nodeperValueArray = document.getElementsByName("nodeper_"+rowsNum);
 for(var i=0;i<nodeperValueArray.length;i++){
var nodeperValue = nodeperValueArray[i].value;
alert(nodeperValue);
 }
  }
</script>
</head>
<body>
<input type="button" name="xx" onclick="addNewRow();" value="增加一行" />
<input type="button" name="yy" onclick="removeRow();" value="刪除一行" />
<table width="600px" border="1" cellpadding="0" cellspacing="0" id="myTab">
        <tr>
         <td width="40px"  align="center" >操作</td>
         <td width="40px"  align="center" >序號</td>
         <td width="70px"  align="center" >節點名稱</td>
         <td width="70px"  align="center" >節點編碼1</td>
<td width="70px"  align="center" >節點編碼2</td>
<td width="70px"  align="center" >操作</td>
       </tr>
    </table>
</body>
</html>

相關推薦

js動態表格新增一行刪除一行儲存一行

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> 

js 動態表格新增一行刪除一行

<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <script language="javascript"> 

js動態添加和刪除標簽

list 賦值 cti tee reat 取值 setattr element nbsp html代碼 <h1>動態添加和刪除標簽</h1> <div id="addTagTest"> <table>

js 動態表格

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML>  <HEAD>   <TITLE> New Document </TITLE>

js動態表格獲取And合併

一.動態的獲取資料 function saveHistoryStatResult() {                  

js 陣列的新增和刪除方法

1. shift() 方法：把陣列的第一個元素刪除，並返回刪除的元素值。(會改變原陣列) var movePos= [11,22]; movePos.shift() console.log(movePos)//[22] alert(movePos)//22 documen

動態的新增和刪除hadoop叢集中的節點

一：新增節點 A：新節點中新增賬戶，設定無密碼登陸 B：Name節點中設定到新節點的無密碼登陸 ssh-copy-id slave4 C：在Name節點slaves檔案中新增新節點 D：在所有節點/etc/hosts檔案中增加新節點（所有節點保持一致）

使用JQueryUI + FreeMarker 實現Div動態DIalog新增和刪除

 <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <

bootstrap-table實現兩個表格之間資料的傳遞，表格新增行刪除行功能

bootstrap table是一個非常不錯的，基於bootstrap的外掛，它擴充套件和豐富了bootstrap表格的操作，如格式化表格，表格選擇器，表格工具欄，分頁等等。 其實可以參考上述的例項進行擴充套件開發，比如兩個表格之間進行資料的傳遞，如下圖所示： 左邊表

js操作DOM--新增、刪除節點

js removeChild() 用法 <body> <p id="p1">welcome to <b>javascript</b> world !</p> <script language="javas

js動態給表格新增一行、刪除一行

最近寫程式碼遇到這個需求，特地總結了一下寫了個demo，如下所示： 程式碼： <!DOCTYPE html> <html> <head> <title>new document</title> <meta http-

js動態新增table表的一行和刪除一行

<html> <title></titile> <body> <a href="javascript:addTr()">新增</a> <table id="tableId"> <tr>

js動態新增表格和刪除表格

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script language="JavaS

js動態刪除table中的一行的方法

//得到行物件 function getRowObj(obj) { var i = 0; while(obj.tagName.toLowerCase() != "tr"){ obj = obj.parentNode; if(obj.tagName.toLowerCase() == "ta

動態表格，通過點選按鈕增加或者刪除一行表格!

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> <HTML> <HEAD> <TITLE> New Document </TITLE>

表格點選按鈕新增和刪除一行，新增和刪除一列

html程式碼： <div> <input type="button" value="新增一行" onclick="editTable.addRow()"/> <input type="button" value="刪除一行" onclick

JS實現動態表格的新增，修改，刪除操作

1.  首先在頁面中配置好一個表格框架 <tr> <td>新增引數:</td> <td class="pn-fcontent"><input type="button" value="選擇" oncli

jQuery獲取動態表格中checkbox被選中一行的屬性數據

jquery table tr 表格 動態 http://www.jianshu.com/p/0ec66caf4c40 jQuery獲取表格中checkbox被選中一行的屬性數據jQuery獲取動態表格中checkbox被選中一行的屬性數據

JS實現表格Table動態添加刪除行

type idt parent mov move style alert inner js代碼 1、頁面內容 　　　　　　<table style="border:1px ; width:100%; height:160px">

Js動態給表格節點tbody新增<td>資料

/** * 動態<td>填充當前頁 */ function fillPage() { // 根據記錄數確定要生成的行數 for (var i = 0; i != dataArray.length; ++i) { // 建立一個行元素