如何在不使用id和class的情況下使用javascript設置td ..？

Question

嗨，我有HTML這樣的...

<table width="600"> 
<tr> 
    <td> 
    Text 
    </td> 
</tr> 
<tr> 
    <td> 
    <img src="demo.jpg" width="200" height="200"/> 
    </td> 
</tr> 
<tr> 
    <td style="font:arial;"> 
    <img src="demo.jpg" width="200" height="200"/> 
    </td> 
</tr> 
<tr> 
    <td style="font:arial;"> 
    <a href="#"> 
    <img src="demo.jpg" width="200" height="200"/> 
    </a> 
    </td> 
</tr> 
</table> 

我使用下面的函數添加樣式=「FONT-SIZE：0％」，在TD的所有有圖像。

function change(input, output) { 
    var div = document.createElement("div"); 
    try { 
     div.innerHTML = input; 
    } catch (e) { 
     alert(e.message); 
     return; 
    } 

var table = div.getElementsByTagName("table"), 
    tds = div.getElementsByTagName("td"), 
    tdsWithImages = Array.prototype.slice.call(tds).filter(function (td) { 
     return td.getElementsByTagName('img').length > 0 
    }); 
    tdsWithImages.map(function (td) { 
     td.style.fontSize = "0%"; 
    }); 
    output.value = div.innerHTML; 
} 

樣式屬性被覆蓋。 即style =「font：arial;」將被重寫爲style =「font-size：0％;」在所有的td有圖像。

但它應該是style =「font：arial; font-size：0％;」

謝謝！

Answer 1

我建議，而不是使用直接樣式元素，並使用JavaScript操縱它，你只需使用CSS類，它也是做事情而不是內聯你的樣式的正確方法。 我還建議你將字體樣式移動到另一個（或同一個）類。

CSS：

.zero_font_size { 
    font-size:0% 
} 

的javascript：

var tds = document.getElementByTagName("td"); 
for (var i = 0; i < tds.length; i++) { 
    tds[i].className = tds[i].className + "zero_font_size"; 
} 

的JavaScript ECMAScript5（新的瀏覽器）

var tds = document.getElementByTagName("td"); 
tds.forEach(function(td) { 
    td.className = tds.className + "zero_font_size"; 
}); 

，或者如果你想使用內聯樣式：

var tds = document.getElementByTagName("td"); 
for (var i = 0; i < tds.length; i++) { 
    tds[i].cssText = tds[i].cssText + ";font-size:0%"; 
} 

Answer 2

使用JQUERY腳本怎麼樣？ DEMO http://jsfiddle.net/MGRcA/2/

JQUERY

$(document).ready(function() { 
    $('td').find('img').map(function(){ 
     $(this).parent('td').css({'font-size':'0%', 'font-family':'arial'}); 
    }); 
}); 

HTML

<table width="600"> 
<tr> 
    <td> 
    Text 
    </td> 
</tr> 
<tr> 
    <td> 
    <img src="demo.jpg" width="200" height="200"/>Text 
    </td> 
</tr> 
<tr> 
    <td style="font:arial;"> 
    <img src="demo.jpg" width="200" height="200"/>Text 
    </td> 
</tr> 
<tr> 
    <td style="font:arial;"> 
    <a href="#"> 
    <img src="demo.jpg" width="200" height="200"/>Text 
    </a> 
    </td> 
</tr> 
</table>