研究 html js 自动获取 id 和内容自动增加显示的功能

<div class="pk-margin-bottom-15 pk-text-right" style="height:30px;line-height:30px;">
	<div class="pk-float-left">
		<button type="button" class="pk-btn pk-btn-success pk-btn-sm _dobtn" data-do="restore">恢复</button>
		<button type="button" class="pk-btn pk-btn-danger pk-btn-sm _dobtn" data-do="delete">删除</button>
		<button type="button" class="pk-btn pk-btn-warning pk-btn-sm _dobtn" data-do="empty">清空</button>
	</div>
	<input id="_radio1" type="radio" class="_radio pk-cursor-pointer" name="type" value="read" />
	<label for="_radio1" class="pk-cursor-pointer">文章</label>
	<span>&nbsp;</span>
	<input id="_radio2" type="radio" class="_radio pk-cursor-pointer" name="type" value="reply" />
	<label for="_radio2" class="pk-cursor-pointer">回复</label>
	<span>&nbsp;</span>
	<input id="_radio3" type="radio" class="_radio pk-cursor-pointer" name="type" value="reply_reply" />
	<label for="_radio3" class="pk-cursor-pointer">楼中楼</label>
</div>
<table id="mainTable"></table>




<script>
	var _table;
	$(function () {
		var type = K._get('type') || 'read',
			url = 'index.php?c=app&a=superadmin&s=forum&t=recycle&do=';

		$('._dobtn').on('click', function () {
			var _do = $(this).data('do'),
				s = $('input[name="id[]"]:checked');
			var txt = '确认清空回收站？<p class="pk-text-danger pk-text-xs">该操作不可恢复！</p>';
			if (K.in_array(_do, 'restore,delete')) {
				if (!s.length) {
					K.msg('未选择任何项', 0);
					return false;
				}
				txt = '确认' + (_do == 'restore' ? '恢复' : '删除') + '已选中的项？';
			}
			K.confirm(txt, function () {
				ids = [];
				for (var i = 0; i < s.length; i++) {
					ids.push($(s[i]).val());
				}
				ids = ids.join(',');
				$.getJSON(url + _do, {
					ids: ids
				}, function (rd) {
					if (!rd['code']) {
						return false;
					}
					$('input[name="select_checkbox_all"]').prop('checked', false);
					_table.reload();
				});
			});
		});
		$('._radio[value="' + type + '"]').prop('checked', true);
		$('._radio').on('change', function () {
			location.href = url + '&type=' + $(this).val();
		});
		var cols = [{
			field: 'id',
			title: 'ID',
			width: 70,
			align: 'center'
		}, {
			field: 'username',
			title: '用户',
			width: 128,
			align: 'center',
			format: function (v, row) {
				return '<a target="_blank" class="pk-text-primary pk-hover-underline" href="index.php?c=center&uid=' + row['uid'] + '">' + v + '</a>';
			}
		}];
		if (type == 'reply') {
			cols.push({
				field: 'rid',
				title: '文章ID',
				width: 80,
				align: 'center',
				format: function (v) {
					return '<a target="_blank" class="pk-text-primary pk-hover-underline" href="index.php?c=read&id=' + v + '&page=1">' + v + '</a>';
				}
			});
		}
		if (type == 'reply_reply') {
			cols.push({
				field: 'readid',
				title: '文章ID',
				width: 80,
				align: 'center',
				format: function (v) {
					return '<a target="_blank" class="pk-text-primary pk-hover-underline" href="index.php?c=read&id=' + v + '&page=1">' + v + '</a>';
				}
			});
			cols.push({
				field: 'replyf',
				title: '楼层',
				width: 80,
				align: 'center',
				format: function (v) {
					return v + '#';
				}
			});
		}
		cols = cols.concat([{
			field: type == 'read' ? 'title' : 'content',
			title: type == 'read' ? '标题' : '内容',
			format: function (v, row) {
				if (type == 'read') {
					return '<a class="pk-text-primary pk-hover-underline" href="javascript:;" data-data="' + K.htmlspecialchars(JSON.stringify(row)) + '" data-key="' + row['key'] + '" onclick="previewRead(this)" title="预览文章">' + v + '</a>';
				}
				return v;
			}
		}, {
			field: 'posttime',
			title: '发布时间',
			width: 200,
			align: 'center',
			format: function (v) {
				return K.date('Y-m-d H:i', v);
			}
		}]);
		_table = K.table({
			elem: '#mainTable',
			data: url + 'get&type=' + type,
			page: {
				page: 1,
				limit: 50
			},
			cols: cols,
			checkbox: 1
		});
	});

	function previewRead(me) {
		var key = $(me).data('key'),
			data = $(me).data('data'),
			html = '';
		for (var i in data) {
			html += '<input name="' + i + '" value="' + K.htmlspecialchars(data[i]) + '">';
		}
		//创建iframe框架
		var _tmpstyle_h = $('html').css('overflow-y');
		var _tmpstyle_b = $('body').css('overflow-y');
		var _pid = ppp({
			type: 1,
			title: "审核预览",
			content: '<iframe name="previewiframe" src="" style="width:100%;height:100%;border:0;overflow-y:scroll"></iframe>',
			area: ['100%', '100%', '0', 'auto', 'auto', '0'],
			submit: function () {
				$('tr[data-key="' + key + '"] input[name="id[]"]').prop('checked', true);
			},
			close: function () {
				$('html').css('overflow-y', _tmpstyle_h);
				$('body').css('overflow-y', _tmpstyle_b);
			},
			complete: function (_id) {
				$('#pkpopup_' + _id + ' .pk-popup-body,body').css('overflow-y', 'hidden');
				$('#pkpopup_' + _id + ' .pk-popup-foot>a:eq(0)').html('选中');
				if ($('form[name="form_preview"]').length == 0) {
					$('body').append('<form class="pk-hide" target="previewiframe" name="form_preview" method="post" action="index.php?c=preview"></form>');
				}
				$('form[name="form_preview"]').html(html).submit();
			}
		});
	}
</script>