jquery表格添加一行（jqueryeasyui单击按钮表格增加可编辑一行的代码应该怎么写项目卡一天了）

本文目录

• jqueryeasyui单击按钮表格增加可编辑一行的代码应该怎么写项目卡一天了
• 如何使用jquery对表格数据进行增加、保存、删除操作代码详解
• jQuery如何追加tr到table中
• 如何通过jquery动态给表格添加一行
• 用jquery遍历表格之后，添加一行数据，如果数据存在，就不给添加，跳出弹窗提示
• jquery向表格中添加行 让id递增
• 如何用jQuery实现用户信息表格的添加、删除
• jquery如何给指定的表格增加行，然后给每行插入数据，而且其中一行能有超链接的
• jquery里怎么用clone给表格增加一行
• jQuery如何在表格中添加或者删除下一行

jqueryeasyui单击按钮表格增加可编辑一行的代码应该怎么写项目卡一天了

首先，为需要的列设置器
例如：
{field:’F1’,title:’咧列’,width:100,align:’center’,
editor: {
type: ’numberbox’,
options: {
min:1
}
}
}
第二步，按钮点击事件中添加代码
$(’#dg’).datagrid(’appendRow’,{
F1: ’新名称’
});
三，开启列
$(’#dg’).datagrid("beginEdit", i);//i为需要的行号

如何使用jquery对表格数据进行增加、保存、删除操作代码详解

我们往往不是通过提交表单来处理这些数据，因为如果在后台去遍历处理这些大量的数据是非常繁琐的；比较好的做法是在前台页面中将数据以对象形式保存在json中，然后在后台直接将json转换成我们需要的对象，这样我们的直接可以处理对象了！
添加按钮
《input name="button" type="button" value="添加" onClick="addRowForPswdBasicFillTemplate(’pswd_basic_fill_template’)"》table id是pswd_basic_fill_template
添加方法
function addRowForPswdBasicFillTemplate(tid){
var applyAreaOptionStr = $(’#applyAreaOptionStr’).val(); //这里是对select框的一些初始化
did = tid;
var tr = $("《tr》《/tr》").attr("bgcolor","#FFFFFF");
tr.append($("《td》《/td》").html("《input type=’radio’ name=’radio’ value=’checkbox’》《/td》"));
tr.append($("《td》《/td》").html(""));
tr.append($("《td》《/td》").html("《input type=’text’ name=’index_name’ id=’index_name’ /》"));
tr.append($("《td》《/td》").html(""));
tr.append($("《td》《/td》").html("《select name=’apply_Area’ id=’apply_Area’》"+applyAreaOptionStr+"《/select》"));
tr.append($("《td》《/td》").html("《select name=’index_species’ id=’index_species’》"+$("#indexSpeciesHtml").val()+"《/select》"));
tr.append($("《td》《/td》").html("《textarea maxlength=’500’ rows=’3’ cols=’20’ name=’formula’ id=’formula’/》"));
tr.append($("《td》《/td》").html("《input type=’text’ name=’cap’ id=’cap’ size=’5’/》"));
tr.append($("《td》《/td》").html("《input type=’text’ name=’base_value’ id=’base_value’ size=’5’/》"));
tr.append($("《td》《/td》").html("《input type=’hidden’ id=’orgid’ name=’orgid’ /》
《select name=’assessOrg’ id=’assessOrg’》"+$("#assessOrgHtml").val()+"《/select》"));
tr.appendTo($("#"+tid));
setRowNumber_1(tid); //保存编号，上移下移操作会用到 ，先不关注
}保存按钮
《input name="button" type="button" value="保存" onClick="savePswdBasicFillTemplate(’pswd_basic_fill_template’)"》保存方法
function savePswdBasicFillTemplate(tid){
did = tid;
var result = getPswdBasicFillTemplate(); //封装数据操作，请仔细看
if(result){
/*
if(pswd_basic_fill_template.length《1){
showInfo("请添加基础数据标准");
return;
}
*/
for(var i=0;i《pswd_basic_fill_template.length;i++){
pswd_basic_fill_template);
}
$.post("《c:url value=’/secbasicFillTemplate/save’/》",{"tempLateList":""},
function(data) {
if("false"==data){
showInfo("请先保存基础信息！");
}else{
//delAllTr("pswd_basic_fill_template"); //删除行
showInfo("保存成功！")
if(did!="fjsjbz"){
changeTaskType(tid);
}
}
});
}
}
//基础填报模版
var pswd_basic_fill_template = {};
//要删除的tableId
var did = "pswd_basic_fill_template";
//获取模板值
function getPswdBasicFillTemplate(){
pswd_basic_fill_template=;
var trs=eval("$(\"#"+did + " tbody tr\")");
var result=true;
$.each(trs,function(i,tr){
var order = $(tr).find("td:nth-child(2)").text();
var indexCode = $(tr).find("input").val();
var indexName = $(tr).find("input").val();
var indexType = $(tr).find("select").find("option:selected").text();
var indexSpecies = $(tr).find("select").find("option:selected").text();
var formula = $(tr).find("textarea").val();
var cap = $(tr).find("input").val();
var baseValue = $(tr).find("input").val();
var assessOrg = $(tr).find("select").val();
var assessOrgName = $(tr).find("select").find("option:selected").text();
var idObj = $(tr).find("input").val();
var indexValue = $(tr).find("input").val();
var templateType = "2";
if(did=="zdppbzlb"){
templateType = "3";
}else if(did=="fjsjbz"){
templateType = "4";
assessOrg = $(tr).find("select").val();
}
var taskType = $("#task_type").val();
if(indexCode.length《1){
showInfo("指标名称不能为空");
result = false;
return false;
}
if(indexName.length《1){
showInfo("指标代号不能为空");
result = false;
return false;
}
var postIndexId = $(’#postIndex’).val();
var postIndexName = $(’#postIndex’).find("option:selected").text();
var applyAreaId = $(tr).find("select").val();
var applyAreaName = $(tr).find("select").find("option:selected").text();
var pswd_basic_fill_templateBean={
"postIndexId":postIndexId,"postIndexName":postIndexName,"applyAreaId":applyAreaId,"applyAreaName":applyAreaName,
"indexCode":indexCode,"templateType":templateType,"indexValue":indexValue,
"indexName":indexName,"taskType":taskType,"order":order,"id":idObj,"baseValue":baseValue,
"indexSpecies":indexSpecies,"formula":formula,"cap":cap,"orgName":assessOrgName,"orgid":assessOrg
}
pswd_basic_fill_template.push(pswd_basic_fill_templateBean);
})
return result;
}前台的操作就完成了，下面看一看后台的操作
struts配置文件
《method name="save" uri="/secbasicFillTemplate/save"》
《result name="success" type="redirect"》@list《/result》
《result name="failed"》secassessment/basicFillTemplate/basicFillTemplateNew《/result》
《/method》后台操作
public void save() {
String obj = request().getParameter("tempLateList");
List《SecBasicFillTemplate》 result = JSonUtil.paserJsonArray(SecBasicFillTemplate.class,obj);
//将json转化为对象
}下面看看删除操作
删除按钮 《input name="button" type="button" value="删除" onClick="delRowForSpacialById(’pswd_basic_fill_template’)" 》
//删除一行的数据
function delRowForSpacialById(tid){
var selObj=getSelRowJnSpacial(tid);
if(selObj){
var result = confirm("确定将记录删除？");
if(result){
var id = selObj.parent().parent();
var idValue = id.find("input").val();
if(idValue!=null && idValue.length》0){
$.post("《c:url value=’/secbasicFillTemplate/delete’/》",{"ids":idValue},function(){
selObj.parent().parent().remove();
})
}else{
selObj.parent().parent().remove();
}
}
}
}
// 获取选中的行
function getSelRowJnSpacial(tid){
var selObj=eval("$(\"#"+tid+" input\")");
if(selObj.html()!=null){
return selObj;
}else{
showInfo("请选择要操作的行");
return null;
}
}
struts 配置文件
《method name="delete" uri="/secbasicFillTemplate/delete" 》
《result name="success" type="redirect"》@list《/result》
《/method》
后台方法
public void delete(String ids) {
//方法
}
上移下移功能
按钮
《input name="button" type="button" value="上移" onClick="moveBefore(’pswd_basic_fill_template’)"》
《input name="button" type="button" value="下移" onClick="moveAfter(’pswd_basic_fill_template’)"》
//上移行
function moveBefore(tid){
did =tid;
var selObj= $("input:radio");
if(selObj==null){
showInof("请选择要移动的行");
}else{
var rowIndex = selObj.parent().parent().rowIndex;
if(parseInt(rowIndex)《=2){
showInfo("已经到顶,不能再上移了");
return;
}
var preObj=selObj.parent().parent().prev();
var selRow=selObj.parent().parent().clone();
preObj.before(selRow);
selObj.parent().parent().remove();
setRowNumber_1_1(did);
}
}
function setRowNumber_1_1(tid){
var fNew = 1;
var expression="$(\"#"+tid+" tbody tr\")";
var tbody=eval(expression);
$.each(tbody,function(i,tr){
if(i》=0){
var number=i+1;
$(tr).find("td:nth-child(2)").text(number);
}
})
}
//下移行
function moveAfter(tid){
did =tid;
var selObj= $("input:radio");
if(selObj==null){
showInof("请选择要移动的行");
}else{
var r1 = selObj.parent().parent().rowIndex;
var a1 = eval("$(\"#"+did+" tbody tr\")").size();
if(parseInt(selObj.parent().parent().rowIndex)-1 》= a1){
showInfo("

jQuery如何追加tr到table中

 jQuery 添加新内容有以下四个方法：

• append() - 在被选元素的结尾插入内容

• prepend() - 在被选元素的开头插入内容

• after() - 在被选元素之后插入内容

• before() - 在被选元素之前插入内容

下面实例演示：点击按钮则在表格数据区域增加一行

1、HTML结构

《table id = "test"》
《thead》
《tr》《th》列1《/th》《th》列2《/th》《th》列3《/th》《/tr》
《/thead》
《tbody》
《tr》《td》1《/td》《td》1《/td》《td》2《/td》《/tr》
《tr》《td》2《/td》《td》4《/td》《td》5《/td》《/tr》
《/tbody》
《/table》
《input type="button" id="btn1" value="在开头增加"》
《input type="button" id="btn2" value="在末尾增加"》

2、jquery代码

$(function(){
$("#btn1").click(function() {
$("#test tbody").prepend(’《tr》《td》《/td》《td》《/td》《td》《/td》《/tr》’);
});
$("#btn2").click(function() {
$("#test tbody").append(’《tr》《td》《/td》《td》《/td》《td》《/td》《/tr》’);
});
});

3、效果演示

如何通过jquery动态给表格添加一行

比如设置table的id为tab
var
trHTML
=
"《tr》《td》...《/td》《/tr》"
$("#tab").append(trHTML);//在table最后面添加一行
$("#tab
tr:eq(2)").after(trHTML);
//
在table的第3行后面添加一行
这样就可以进行动态的添加行了，至于你是通过什么事件来动态添加那就看你自己的意思了，通过button或者div之类的点击事件添加，只要把上面的两行代码放进去就ok，注意，要把var
trHTML那行代码放进添加事件里面，不然不管点击多少下，都只能添加一行
$(function()
{
$(":button").click(function()
{
var
tr
=
"《tr》《td》new《/td》《/tr》";
//$("table").append(tr);
$("table
tr:eq(2)").after(tr);
});
});
这是我测试用的代码，你可以运行看看

用jquery遍历表格之后，添加一行数据，如果数据存在，就不给添加，跳出弹窗提示

《script》
$(function(){ 
var tb = $("table.gradeTabel");
var txt = $(":text");
$(":button").click(function(){
var v = $.trim(txt.val());
if(v=="") return;
else if(!/^\d+$/.test(v)){
alert("要输入数字才对");
txt.focus();
txt.select();
return;
      }
else if(tb.find("tr:contains(’"+v+"’)").length != 0){
alert("学号已经存在了!");
return;
} 
tb.append("《tr》《td colspan=1 class=’stu_Number’》"+v+"《/td》《/tr》");
});
});
《/script》

jquery向表格中添加行 让id递增

《script type="text/javascript" src="jquery.js"》《/script》
《script type="text/javascript"》
function add()
{
var id = jQuery("table").find("tr").length +1 ;
var trHTML = " 《tr id=’"+id+"’》《td》"+id+"《/td》《td》1《/td》《/tr》";
jQuery("table").append(trHTML);
}
《/script》
《body》
《table style="width:200px;height:200px;" border=1》
《tr id="1"》
《td》1《/td》
《td》1《/td》
《/tr》
《tr id="2"》
《td》2《/td》
《td》1《/td》
《/tr》
《/table》
《input type="button" value="增加行" onclick="add()"》
《/body》
而且
变量不能这样定义
var len++;
这是错误的！！！

如何用jQuery实现用户信息表格的添加、删除

1、浏览器界面
2、html代码《body》
《form name="userForm"》
《center》
用户录入 《br /》
用户名: 《input id="username" name="username" type="text" size=15 /》
E-mail: 《input id="email" name="email" type="text" size=15 /》
电话: 《input id="tel" name="tel" type="text" size=15 /》
《input type="button" value="添加" id="btn_submit" /》
《input type="button" value="删除所有" id="btn_removeAll" /》
《/center》
《/form》
---------------------------- 《hr /》
《table border="1" align="center" cellpadding=0 cellspacing=0 width=400》
《thead》
《tr》
《th》用户名《/th》
《th》E-mail《/th》
《th》电话《/th》
《th》操作《/th》
《/tr》
《/thead》
---------------------------- 《tbody id="userTbody"》
《tr》
《td》乔峰《/td》
《td》qiao@163.com《/td》
《td》18212345678《/td》
《td》
《a href=’#’ class=’myClz’》删除《/a》
《/td》
《/tr》
《/tbody》
---------------------------- 《/table》《/body》3、jQuery实现$(function () {
$("#btn_submit").click(function () {
// 获取用户输入的值
var usernameVal = $("#username").val();
var emailVal = $("#email").val();
var telVal = $("#tel").val();
var tr = "《tr》《td》" + usernameVal + "《/td》《td》" + emailVal
+ "《/td》《td》" + telVal
+ "《/td》《td》《a href=’#’ class=’myClz’》删除《/a》《/td》《/tr》";
$("#userTbody").append(tr);
}); // 全部删除
$("#btn_removeAll").click(function () {
$("#userTbody").empty();
}); //删除一行数据
/*click只对本身页面有的元素有作用，对于后面新加的元素，不起作用
$(".myClz").click(function() {
console.log(123);
});
*/
/*选择id=userTbody元素下所有样式名含有myClz的标签,并添加click事件
*当点击后,向上一级找到tr元素，然后删除
*/
$(’#userTbody’).on(’click’, ".myClz", function () {
$(this).closest(’tr’).remove();
});
});

jquery如何给指定的表格增加行，然后给每行插入数据，而且其中一行能有超链接的

1. datatable如果想转换成JSON类型的数据，是需要处理的。直接用微软提供的JavaScriptSerializer类直接序列化，会报错。

   所以这里需要贴上两个方法，专门用来转换datatable的

#region DataTable转换为JSON
    /// 《summary》
    /// DataTable生成JSON
    /// 《/summary》
    /// 《param name="dt"》《/param》
    /// 《returns》《/returns》
    public static string CreateJSON(DataTable dt)
    {
        Dictionary《string, object》 dit = new Dictionary《string, object》();
        List《Dictionary《string, string》》 list = DateTableConverter(dt);
        if (list != null)
        {
            dit = DateTableConverter(dt);
            return new JavaScriptSerializer().Serialize(dit);
        }
        else
        {
            return "";
        }
    }
    /// 《summary》
    /// 将DataTable数据转化为字典类型
    /// 《/summary》
    /// 《param name="dt"》《/param》
    /// 《returns》《/returns》
    public static List《Dictionary《string, string》》 DateTableConverter(DataTable dt)
    {
        List《Dictionary《string, string》》 list = new List《Dictionary《string, string》》();
        string cloName = string.Empty;
        foreach (DataRow dr in dt.Rows)
        {
            Dictionary《string, string》 cloumn = new Dictionary《string, string》();
            foreach (DataColumn dc in dt.Columns)
            {
                cloName = dc.ColumnName;
                cloumn.Add(cloName, dr.ToString());
            }
            list.Add(cloumn);
        }
        return list;
    }
    #endregion

    2.调用代码如下

            DataTable table = new DataTable("Table1");
            DataColumn col1 = new DataColumn("ID", typeof(string));
            DataColumn col2 = new DataColumn("Name", typeof(string));
            table.Columns.Add(col1);
            table.Columns.Add(col2);
            DataRow row1 = table.NewRow();
            row1 = "1";
            row1 = "a";
            table.Rows.Add(row1);
            DataRow row2 = table.NewRow();
            row2 = "2";
            row2 = "b";
            table.Rows.Add(row2);
            string json = CreateJSON(table);

    3.json结果如下

{"Table1":}

    4.数组中每一个元素，都是一行数据。只要循环遍历，然后将结果添加入你已经创建好的table中就可以了。还有疑问，继续追问吧。我先去吃饭了。

jquery里怎么用clone给表格增加一行

你想要的效果是，表格的每一行后面有个“添加”按钮，点击按钮后，会自动复制当前行，添加到当前行的后面，这个效果吧？

假设，我们有这样一个table表格：

《table id="table"》
    《tr》
        《td》内容1《/td》
        《td》
            《button class="addtr"》添加《/button》
            《button class="deltr"》删除《/button》
        《/td》
    《tr》
《/table》

用jquery来实现“添加”和“删除”的功能：

下面这个是添加：

$("#table").on("click","button.addtr",function(){
    var $tr=$(this).parents("tr");
    $tr.append($tr.clone());
});

下面是删除：

$("#table").on("click","button.deltr",function(){
    var $tr=$(this).parents("tr");
    $tr.remove();
});

可以参考这里，有完整的在线实例演示：

query实例：表格里点击按钮后添加一行，新添加的行附带删除按钮

jQuery如何在表格中添加或者删除下一行

html代码
《div》
《table》
《tr》《td》1111《/td》《td》《input type="button" value="添加下一行" /》《input type="button" value="删除下一行" /》《/td》《/tr》
《tr》《td》2222《/td》《td》《input type="button" value="添加下一行" /》《input type="button" value="删除下一行" /》《/td》《/tr》
《tr》《td》4444《/td》《td》《input type="button" value="添加下一行" /》《input type="button" value="删除下一行" /》《/td》《/tr》
《/table》
《/div》
jQuery代码
《script type="text/javascript" src="Scripts/jquery-1.4.1.js"》《/script》
《script type="text/javascript"》
$(document).ready(function () {
ModifyClick();
});
function ModifyClick() {
$("table tr input ").each(function () {
$(this).unbind("click");
$(this).bind("click", function () {
if ($(this).val() == "添加下一行") {
$(this).parent().parent().after("《tr》《td》Add《/td》《td》《input onclick=\"ModifyClick()\" type=button value=\"添加下一行\" /》《input onclick=\"ModifyClick()\" type=button value=\"删除下一行\" /》《/td》《/tr》");
}
if ($(this).val() == "删除下一行") {
$(this).parent().parent().next().eq(0).remove();
}
});
});
}
《/script》