Super simple jquery manipulation table method

2020-05-05 10:55:26
OfStack

This article illustrates a super simple jquery manipulation table method. Share with you for your reference. The specific implementation method is as follows:

Adds a line to the specified table and removes a line
with jquery

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

<table border="1px #ooo" id="test" name="test" class="test" cellpadding="0" cellspacing="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" cellspacing="0" width="20%"> <tr id="4"><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> // in id for test the table Add a row to the end of 

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); } // delete id for test the table Last line 

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

}

</script>

jQuery dynamically adds
to delete rows and columns from the table

<!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">

<head>

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

<style type="text/css"> .cl1{ background-color:#FFFFFF; } .cl2{ background-color:#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;  

function addRow(){ rowCount++; var rowTemplate = '<tr class="tr_'+rowCount+'"><td>'+rowCount+'</td><td class="cl1"> content '+rowCount+'</td><td class="cl1"><a href="#" onclick=delRow('+rowCount+')> delete </a></td></tr>';

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

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

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

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

var trHtml = $(this).html(); trHtml += '<td onclick="delCol('+colCount+')"> To increase the 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 Operation table test </title>

</head>

<body>

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

<td> The serial number </td> <td onmouseover="mover(1);" onmouseout="mout(1);"> content </td>

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

</table>

<input type="button" value=" Add the line " onclick="addRow();"/>

<input type="button" value=" Add columns " onclick="addCol();"/>

</body>

jquery action tables (add/delete rows, add/delete columns)

<!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">

<head>

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

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

<title>jquery Operation table test </title>

<script type="text/javascript">

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

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

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

<td class="cl1">'+tableCount+'</td><td class="cl1"> content '+tableCount+'</td>

<td class="cl1"><a href="javascript:void(0)" onclick=del('+tableCount+');> delete </a></td></tr>'; $("#testTable tbody").append(addRowTemplete); } function addCol(){ $("#testTable tr").each(function(){    var trHtml = "<td onclick='delCol("+colCount+")'> Have to add 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)"> The serial number </td> <td onclick="delCol(1)"> content </td> <td onclick="delCol(2)"> operation </td> </tr> </table> <p> <input type="button" name="Submit" value=" Add the line " onclick="addRow()" /> <input type="button" name="Submit2" value=" Add columns " 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">

<head>

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

<title> One percent of my women's clothing store official website | White vegetable garden community |4000-921001| One hundred </title>

<meta name="keywords" content=" One percent of me , One percent of my women's clothing store , My one percent mall , My 1% taobao " />

<meta name="description" content=" One percent of my taobao three gold dress shop official website 100f1.com, Only for 100 percent a tasteful beauty! My one percent mall releases new fashion women's wear and fashion fashion women's wear every month. " />

<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> options <span>1</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);"> delete </a></dd>

<dd> options <span>2</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);"> delete </a></dd>

<dd> options <span>3</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);"> delete </a></dd>

<dd> options <span>4</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);"> delete </a></dd>

<dd> options <span>5</span>:<input type="text"  class="text"  /><a class="base_icon" href="javascript:void(0);"> delete </a></dd>

</dl>

<p class="add_opt">

<span class="base_icon"> Add more options </span>

</p>

</div>

</div>

</body>

<script type="text/javascript">

$(document).ready(function(){// Voting options plus or minus control 

var fatie = $("#fatie");

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

function list_again(){// Option reorder 

option.each(function(){

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

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

})

}

fatie.find(".add_opt span").click(function(){// More options 

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(){// Delete options 

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

list_again();

})

})

</script>

</html>

I hope this article has been helpful to your jquery programming.