Chèn hình ảnh vào ô bảng trong Javascript

Tôi muốn chèn hình ảnh vào ô mới vừa tạo. Tôi làm nó như thế nào? Có ai hướng dẫn tôi làm việc đó không? Đây là mã của tôi để chèn vào:Chèn hình ảnh vào ô bảng trong Javascript

<!DOCTYPE html> 
<html> 
<head> 
<script> 
function displayResult() 
{ 
var firstRow=document.getElementById("myTable").rows[0]; 
var x=firstRow.insertCell(-1); 
x.innerHTML="New cell" 
} 
</script> 
</head> 
<body> 

<table id="myTable" border="1"> 
    <tr> 
    <td>First cell</td> 
    <td>Second cell</td> 
    <td>Third cell</td> 
    </tr> 
</table> 
<br> 
<button type="button" onclick="displayResult()">Insert cell</button> 

</body> 
</html>

Tất cả những gì tôi muốn là chèn hình ảnh vào ô được tạo.

Nguồn

2013-06-07 user2462483

Bạn có thể đặt một số văn bản trong bạn 'td' bằng cách sử dụng' innerHTML' nhưng bạn không thể đặt ở đó một thẻ 'img'? – Teemu

@Teemu Có .. chính xác .. – user2462483

Tôi không hiểu lắm, sự khác biệt là gì nếu bạn viết "" 'thay vì' "Ô mới" '? – Teemu

function displayResult() 
    { 
    document.getElementById("myTable").rows[0].innerHTML="your image"; 
    }

có thể giúp điều này có thể đạt được, năng động có thể đạt được sau này, chỉ cần thử nếu nó hoạt động ngay bây giờ?

Nguồn

2013-06-07 07:20:35

Điều này sẽ hiển thị tên của tệp hình ảnh. Nó không đưa hình ảnh thực tế ra khỏi đó. – LaurelS

Chỉ cần đặt HTML bên trong của ô mới thành HTML của phần tử img, với bất kỳ src hoặc thuộc tính nào bạn muốn.

function displayResult() 
{ 
    var firstRow=document.getElementById("myTable").rows[0]; 
    var x=firstRow.insertCell(-1); 
    x.innerHTML="<img src='myImageURL' alt='hello'/>"; 
}

Nguồn

2013-06-07 07:20:37

Hey điều này làm việc cho tôi! Tôi cũng thích số dòng tối thiểu. – LaurelS

Bạn có thể tạo ra các yếu tố hình ảnh và thêm nó vào các tế bào mới:

function displayResult() 
{ 
    var firstRow=document.getElementById("myTable").rows[0]; 
    var x=firstRow.insertCell(-1); 
    x.innerHTML="New cell"; 

    var img = document.createElement('img'); 
    img.src = "link to image here"; 
    x.appendChild(img); 
}

Cẩn thận với việc xây dựng mã HTML thô cho hình ảnh, nếu bạn làm điều đó theo cách đó bạn sẽ cần phải thực hiện chắc chắn rằng bạn thoát khỏi src và bất kỳ thuộc tính nào khác.

Nguồn

2013-06-07 07:21:01 MrCode

Công cụ này có thể hữu ích cho việc thoát các thuộc tính html: http://www.accessify.com/tools-and-wizards/developer-tools/quick-escape/default.php – brntsllvn

Chèn hình ảnh vào ô bảng trong Javascript

Trả lời

Các vấn đề liên quan