Supereinfache JQuery-Methode zum Betreiben von tables

Heim

Web-Frontend

js-Tutorial

Supereinfache JQuery-Methode zum Betreiben von tables_jquery

May 16, 2016 pm 04:26 PM

jquery 操作方法表格

Das Beispiel in diesem Artikel beschreibt die supereinfache JQuery-Tabellenoperationsmethode. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

Verwenden Sie jquery, um eine Zeile hinzuzufügen und eine Zeile zur angegebenen Tabelle zu löschen

Code kopieren Der Code lautet wie folgt:

<script language="javascript" src="./jquery. js"> ;</script>

<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellpacing="0" width="20%">

<tr id="1"><td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td></tr>

<tr id="2"><td width="30%">11</td>

<td width="30%">22</td>

<td width="30%">33</td></tr>

</table>

<table border="1px #ooo" id="test1" name="test1" cellpadding="0" cellpacing="0" width="20%">< td width="30%">1</td>

<td width="30%">2</td>

<td width="30%">3</td>

</tr>

</table>

<input type="button" name="button" value="add" onclick="addtr('test');">

<input type="button" name="button" value="del" onclick="deltr('test');">

<script> //Fügen Sie am Ende der Tabelle eine Zeile mit der ID test hinzu

function addtr(id){ tr_id = $("#test>tbody>tr:last").attr("id");

tr_id; //alert(tr_id);

str = "<tr id = '" tr_id "'><td width='30%'>re1</td><td width='30%'>re2</td><td width='30%'>re3</td></tr>";

$('#' id).append(str); } //Löschen Sie die letzte Zeile der Tabelle mit id test

function deltr(id){ tr_id = $("#test>tbody>tr:last").attr("id"); $('#' tr_id).remove();

}

</script>

jQuery fügt Tabellenzeilen und -spalten dynamisch hinzu und löscht sie

Code kopieren Der Code lautet wie folgt:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<Kopf>

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

<style type="text/css"> .cl1{ Hintergrundfarbe:#FFFFFF; } .cl2{ Hintergrundfarbe:#FFFF99; } </style>

<script type="text/javascript" src="css_js/jquery/jquery-1.3.2.min.js"></script>

<script type="text/javascript">

var rowCount = 0;

var colCount = 2;  

Funktion addRow(){ rowCount ; var rowTemplate = '<tr class="tr_' rowCount '"><td>' rowCount '</td><td class="cl1">内容' rowCount '</td><td class="cl1"><a href="#" onclick=delRow(' rowCount ')>删除</a></td></tr>';

var tableHtml = $("#testTable tbody").html();

tableHtml = rowTemplate; $("#testTable tbody").html(tableHtml); }

  function delRow(_id){ $("#testTable .tr_" _id).hide(); rowCount--; }  

Funktion addCol(){ colCount ; $("#testTable tr").each(function(){  

var trHtml = $(this).html(); trHtml = '<td onclick="delCol(' colCount ')">增加的td</td>';

$(this).html(trHtml);

});  

}  

function delCol(_id){   $("#testTable tr").each(function(){ $("td:eq(" _id ")",this).hide(); });

colCount--;

}  

function mover(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl1"); 

$("td:eq(" _id ")",this).addClass("cl2"); }); }  

function mout(_id){ $("#testTable tr:not(:first)").each(function(){ $("td:eq(" _id ")",this).removeClass("cl2"); 

$("td:eq(" _id ")",this).addClass("cl1"); }); } </script>

<title>jquery操作表格测试</title>

</head>

<body>

<table id="testTable" border="1" width="500"> <tr>

<td>序号</td> <td onmouseover="mover(1);" onmouseout="mout(1);">内容</td>

<td onmouseover="mover(2);" onmouseout="mout(2);">操作</td> </tr>

</table>

<input type="button" value="添加行" onclick="addRow();"/>

<input type="button" value="添加列" onclick="addCol();"/>

</body>

jquery操作表格(添加/删除行、添加/删除列)

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<Kopf>

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

<script type="text/javascript" src="jquery-1.4.4.min.js"></script>

<title>jquery操作表格测试</title>

<script type="text/javascript">

Funktion del(_id){ $("#testTable .tr_" _id).html('');

var tableTr = $("#testTable .tr_" _id).hide(); }

Funktion addRow(){ var addRowTemplete = '<tr class="tr_' tableCount '">

<td class="cl1">' tableCount '</td><td class="cl1">内容' tableCount '</td>

<td class="cl1"><a href="javascript:void(0)" onclick=del(' tableCount ');>删除</a></td></tr> '; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){    var trHtml = "<td onclick='delCol(" colCount ")'>曾加的td</td>"; $(this).append(trHtml }); } function delCol(_id){ $("#testTable tr").each(function(){    $("td:eq(" _id ")",this).hide(); }); }

</script> </head>

<body>

<table width="487" border="1" id="testTable"> <tr> <td onclick="delCol(0)">序号</td> <td onclick="delCol(1)">内容</td> <td onclick="delCol(2)">操作</td> </tr> </table> <p> <input type="button" name="Submit" value="添加行" onclick="addRow()" /> <input type="button" name="Submit2" value="添加列" onclick="addCol()"/> </p> </body>

</html>

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<Kopf>

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

<title>Offizielle Website von My One Percent Damenbekleidungsgeschäft|Baicaiyuan Community|4000-921001|Just Love One Percent</title>

<meta name="keywords" content="Mein ein Prozent, mein ein Prozent Damenbekleidungsgeschäft, mein ein Prozent Einkaufszentrum, mein ein Prozent Taobao" />

<meta name="description" content="Mein Ein-Prozent-Damenbekleidungsgeschäft Taobao Sanjinguan, offizielle Website 100f1.com, nur ein Prozent geschmackvolle Schönheiten! Mein Ein-Prozent-Einkaufszentrum bringt jeden Monat neue Mode heraus. Damenbekleidung und trendige Kleidung für Frauen. " />

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>

</head>

<body>

<div id="wrap" class="wrap">

<div class="fatie" id="fatie">

<dl class="options">

<dd>Optionen<span>1</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>

<dd>Optionen<span>2</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>

<dd>Optionen<span>3</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>

<dd>Optionen<span>4</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>

<dd>Optionen<span>5</span>:<input type="text" class="text" /><a class="base_icon" href="javascript:void(0);" ;Löschen</a></dd>

</dl>

<p class="add_opt">

<span class="base_icon">Weitere Optionen hinzufügen</span>

</p>

</div>

</div>

</body>

<script type="text/javascript">

$(document).ready(function(){//Abstimmungsoption zur Erhöhung oder Verringerung der Kontrolle

var fatie = $("#fatie");

var option = fatie.find(".options dd");

Funktion list_again(){//Options reorder

option.each(function(){

var i = $(this).index();

$(this).find("span").html(i 1);

})

}

fatie.find(".add_opt span").click(function(){//Option hinzufügen

fatie.find(".options").append('<dd>Options<span>i</span>:<input type="text" class="text" /><a class=" base_icon " href="javascript:void(0);">Delete</a></dd>');

option = fatie.find(".options dd");

list_again();

})

option.find("a").live("click",function(){//Option löschen

$(this).parent().remove();

list_again();

})

})

</script>

</html>

Ich hoffe, dass dieser Artikel für das JQuery-Programmierungsdesign aller hilfreich sein wird.

Erklärung dieser Website

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn