Как получить доступ к тегу span внутри TD, используя DOM - PullRequest
Новая
       0

Как получить доступ к тегу span внутри TD, используя DOM

0 голосов
/ 12 ноября 2019

Как я могу получить доступ к элементу внутри таблицы и раскрасить его?

Я пытался использовать childNodes [x], но я не уверен, как получить диапазон. 

<div id="myDiv">
   <table>
        <tr>
            <td>
                <span>40 (14)</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>24 (19)</span>
            </td>
        </tr>
        <tr>
            <td>
                <span>24</span>
            </td>
        </tr>
   </table>

</div>

(14) должно быть окрашено в красный, (19) должно быть окрашено в красный

24 должно быть неизменным

1 Ответ

0 голосов
/ 12 ноября 2019

Проверьте мое решение и пример запуска: https://jsfiddle.net/tabvn/bh6y1gc3

<!DOCTYPE html>
	<html>
	<head>
		<meta charset="utf-8"/>
		<title></title>
	</head>
	<body>
	<div id="myDiv">
	   <table>
	        <tr>
	            <td>
	                <span>40 (14)</span>
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <span>24 (19)</span>
	            </td>
	        </tr>
	        <tr>
	            <td>
	                <span>24</span>
	            </td>
	        </tr>
	   </table>

	</div>

	<script type="text/javascript">
		var nodes = document.querySelectorAll("#myDiv td span");
		for(var i = 0; i < nodes.length; ++i){
				var node = nodes[i];
				var text = node.innerText;
				var openIndex = -1;
				var closeIndex = -1;
				for(var j = 0; j < text.length; ++j){
					if(text[j] === "("){
							openIndex = j;
					}
					if(text[j] === ")"){
						closeIndex = j;
					}
				}
				var str = "";
				if(openIndex > -1 && closeIndex > -1){
						for(var j = 0; j < text.length; ++j){
							if(j == openIndex){
								str += '<span style="color: red;">';
								str += text[j];		
							}else if(j == closeIndex){
								str += text[j];
								str += "</span>";
							}else{
								str += text[j];
							}

										

						}
						node.innerHTML = str;
				}
				

		}
	</script>

	</body>
	</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...