тест вставки javascript до </table> в текстовой области - PullRequest
Новая
       0

тест вставки javascript до </table> в текстовой области

0 голосов
/ 13 мая 2018

У меня есть текстовая область для ввода актера и персонажа в таблицу с использованием javascript, но мне нужно иметь кнопки для добавления '<table class="xxxx">' и отдельную кнопку для закрытия </table>, есть ли способ изменить следующее код для добавления нового актера в качестве строки таблицы символов перед закрывающим </table>, поэтому устраняется необходимость в дополнительных кнопках? 

function addtxt(input) {
var obj=document.getElementById(input);
var actortxt = document.getElementById('actor').value;
var chartxt = document.getElementById('character').value;
obj.value+="<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>";
}

Ответы [ 3 ]

0 голосов
/ 13 мая 2018

Создайте временную <div> и поместите в нее HTML-строку textarea.

Затем манипулируйте элементом таблицы внутри temp <div>, как если бы он был на странице.

После этого установите значение textarea из innerHTML временного <div>

var editor = document.getElementById('editor')


var tempDiv = document.createElement('div');
tempDiv.innerHTML = editor.value;

var table = tempDiv.querySelector('table'),
  newRow = table.insertRow(),
  cell1 = newRow.insertCell(),
  cell2 = newRow.insertCell();

cell1.textContent = 'Row 2 Cell 1';
cell2.textContent = 'Row 2 Cell 2';

editor.value = tempDiv.innerHTML;
<textarea id='editor' rows="15" cols="200">

<p>Some other element</p>
<table>
 <tr><td> Row 1 Cell 1</td><td>Row 1 Cell 2</tr>
</table>

</textarea>
0 голосов
/ 13 мая 2018

Не берите в голову, немного поработав, я заставил работать это решение: 

    function inserttext(tarea){
        var obj=document.getElementById(tarea);
        var maintext =  document.getElementById(tarea).value;
        var actortxt = document.getElementById('actor').value;
        var chartxt = document.getElementById('character').value;
        var chstr = '<tr><td>'+actortxt+'</td><td>as</td><td>'+chartxt+'</td></tr>';
//      alert('Main:'+maintext+'--'+'Actor:'+actortxt+'--'+'Char:'+chartxt+'--'+chstr);
        var position = maintext.indexOf('</table>');
//      alert('table close found at :'+position);
        var newtext= maintext.substr(0, position) + chstr + maintext.substr(position);
//      alert('New Text:'+newtext);
        obj.value=newtext;
    }
0 голосов
/ 13 мая 2018 
<body style="background:grey">

<input type="text" id="actor"/>
<input type="text" id="character"/>

<div id="therefore"></div>

<script>
var i=0;
function addtxt() {
    i++;
    var actortxt = document.getElementById('actor').value;
    var chartxt = document.getElementById('character').value;
    if(i%3==1){
        var open1 = '<table class="xxxx">';
        var close1 = '';
        i=0;
    }else {
        var open1= '';
        var close1 = '</table>';
    }
    document.getElementById('therefore').innerHTML+=open1+"<tr><td>"+actortxt+"</td><td>as</td><td>"+chartxt+"</td></tr>"+close1;

}
document.addEventListener('click',addtxt,false);
</script>

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

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

...