接收javascript中的html內容后，刪除html表的第一列
[英]Removing a html table first column after receving the html content in javascript
問題描述
我已經創建了一個用於在javascript中將表格內容獲取為html的應用程序，該應用程序運行良好，但是問題是在獲取javascript中的html內容后，我想從javascript html表格內容中刪除第一列
誰能告訴我一些解決方案
function printData() {
var divToPrint = document.getElementById("printTable");
alert(divToPrint.outerHTML);
}
$('button').on('click', function () {
printData();
})
3 個解決方案
解決方案1
4 已采納 2014-10-16 09:48:08
您可以克隆元素，刪除第一個孩子td和第一個th ，然后讀取克隆元素的outerHTML ：
$(divToPrint).clone()
.find('th:first-child, td:first-child').remove().end()
.prop('outerHTML');
解決方案2
1 2014-10-16 10:02:34
只是為了補充Vohuman的答案，我想展示如何使用Vanilla JS完成它：
function printData() {
var divToPrint = document.getElementById("printTable");
var tbody = divToPrint.children;
var rows = tbody[0].children;
for (var i = 0, len = rows.length; i < len; i++) {
rows[i].removeChild(rows[i].childNodes[0]);
cells = rows[i];
if (i==0) { cells.removeChild(cells.getElementsByTagName('th')[0]); }
else { cells.removeChild(cells.getElementsByTagName('td')[0]); }
}
alert(divToPrint.outerHTML);
}
$('button').on('click', function () {
printData();
})
解決方案3
0 2015-06-28 03:48:10
/*this code has two sections or html pages.
Print.hmtl page execute the print task
Example.html page has the table you want,
in this case the table is tbl_show2.
When you press the Print button in Example.html page
btnPrint function calls Print.html page and send two arguments.
contenido and titulo.
When Print.html page loads init() function is called.
In this function insert the HTML content of tbl_show2 in
printTable div object. But HTML content has only the body section
this is the reason we add <table> and </table> tags to complete the
table object. Then after that. removefirstCol() remove the first column
and then the document is printed.*/
/*----------------Print.html-----------*/
<html>
<head>
<script language='JavaScript' type='text/JavaScript'>
<!--
function removefirstCol(){
var divToPrint = document.getElementById('printTable');
for (var k = 0, len = divToPrint.children.length; k < len; k++){
var tbody=divToPrint.childNodes[k];
var rows = tbody.childNodes[1].children;
len2=rows.length;
for (var i = 0; i < len2; i++) {
var row=rows[i];
row.deleteCell(0);
}
}
}
function init() {
if (typeof window.dialogArguments == "object"){
var objContenido = window.dialogArguments.contenido;
var titulo = window.dialogArguments.titulo;
document.getElementById('printTable').innerHTML='<table border=1 id="tbl_show" name="tbl_Show">'+objContenido.cuerpo+'</table>';
removefirstCol();
window.title=titulo;
}
window.print();
}
//-->
</script>
</head>
<body onload="init();" style="margin: 3px">
<div id='printTable'>
</div>
</body>
</html>
/*--------------------Example.html-----------------*/
<html>
<head>
<script language='JavaScript' type='text/JavaScript'>
<!--
/*-----discomment this section for Chrome-------------
window.showModalDialog = function (url, arg, feature) {
var opFeature = feature.split(";");
var featuresArray = new Array()
if (document.all) {
for (var i = 0; i < opFeature.length - 1; i++) {
var f = opFeature[i].split("=");
featuresArray[f[0]] = f[1];
}
}else{
for (var i = 0; i < opFeature.length - 1; i++) {
var f = opFeature[i].split(":");
featuresArray[f[0].toString().trim().toLowerCase()] = f[1].toString().trim();
}
}
var h = "600px", w = "1000px", l = "100px", t = "100px", r = "yes", c = "yes", s = "no";
if (featuresArray["dialogheight"]) h = featuresArray["dialogheight"];
if (featuresArray["dialogwidth"]) w = featuresArray["dialogwidth"];
if (featuresArray["dialogleft"]) l = featuresArray["dialogleft"];
if (featuresArray["dialogtop"]) t = featuresArray["dialogtop"];
if (featuresArray["resizable"]) r = featuresArray["resizable"];
if (featuresArray["center"]) c = featuresArray["center"];
if (featuresArray["status"]) s = featuresArray["status"];
var modelFeature = "height = " + h + ",width = " + w + ",left=" + l + ",top=" + t + ",model=yes,alwaysRaised=yes" + ",resizable= " + r + ",celter=" + c + ",status=" + s;
var model = window.open(url, "", modelFeature, null);
model.dialogArguments = arg;
}
//-----end google chrome section-----*/
function btnPrint(){
var objArgs = {cuerpo: null};
objArgs.cuerpo=document.getElementById("tbl_show2").innerHTML;
window.showModalDialog("Print.html",{contenido: objArgs, titulo: 'Print Example'},"status:no;help:no;resizable:yes;dialogHeight:400px;dialogWidth:800px");
}
//-->
</script>
</head>
<body>
<table border=1 id='tbl_show2' name='tbl_show2'>
<tr>
<td>columna 1
</td>
<td>columna 2
</td>
</tr>
</table>
</body>
<input type="button" name='PrintMe' id='PrintMe' value="Print" language=jscript onclick="btnPrint();">
</html>
使用JavaScript刪除HTML表
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.