jquery 操作表格table

Jquery操作Table 

<table style="border:1px solid #aaa;border-collapse:collapse;width:100%;" id="alarm" class="alarm"> 
   <tr align="center" style="border:1px solid #aaaaaa;background:#ECE9D8;border-collapse:collapse;padding:5px;text-align:left;">  
            <td width="5%" class="region"></td>
            <td width="25%" class="region"> Name </td>
            <td width="20%" class="region"> Type </td>
            <td width="25%" class="region"> Create Time </td>
             <td width="30%" class="region"> Saved By </td>   
    </tr>
</table>

  1、插入一行

  •  将数据插入到第一行
$("#alarm").prepend("<tr><td></td></tr>");
  •   将数据插入到最后一行
$("#alarm").append("<tr><td></td></tr>");
  •    将数据插入到指定行
$("<tr><td></td></tr>").insertAfter($("#alarm tr:eq(1)"));

2、删除一行 

  •   删除第一行 
$("#alarm tr:first").remove();
  •  删除最后一行 
$("#alarm tr:last").remove();
  •  删除指定行 
$("#alarm tr:eq(3)").remove();

3、改变行的颜色

$("#alarm tr:even").css("color", "#0000FF");
$("#alarm tr:odd").css("color", "#000000");
$("#bottom_right_h").attr("src", "../Images/Icon/face.gif");
   var alarmListInfo = eval('(' + info + ')');
    var count = $('#alarm').find("tr").length - 1;
    tr_id = $("#alarm>tbody>tr:first").attr("id");
    tr_id++;
    str = "<tr id = '" + tr_id + "'><td width='20%' id='" + alarmListInfo.TerminalID + "'>"
            + "TerminalID:<a href='#' onclick='javascript:MarkerVehicleByTerminalID(" + alarmListInfo.TerminalID + ")'>" + alarmListInfo.TerminalID+"</a><br/>"
            + "AlarmName:<font color='red'>" + alarmListInfo.AlarmName + "</font><br/>"
            + "AlarmInfo:" + alarmListInfo.AlarmInfo + "</td>"  
            + "</tr>";
    $('#alarm').append(str);
    $("tr:even").css("background", "#EAF2D3");  
    $("tr:odd").css("background", "#ffffff");        
    if (count > 2) {
        delAlarmListTR();
    }
//删除一行 $("#alarm td").each(function () {
        if ($(this).attr('id')) {
            ids.push($(this).attr('id'));
            $(this).parents('tr').remove();
        }
    });

相关推荐