Question

我有一个textarea用于输入一个演员和角色到一个表，用javascript，但必须有按钮添加'<table class="xxxx">'和一个单独的按钮，用于结束</table>，有没有办法修改以下代码以在结束</table>之前将新actor添加为字符表行，从而无需额外的按钮？

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>";
}

Answer 1

<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>

Answer 2

创建一个临时<div>并将textarea html字符串放入其中。

然后操纵临时<div>内的表元素，就好像它在页面中一样。

完成后，从临时<div>

的innerHTML设置textarea值

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>

Answer 3

没关系，通过一些修修补补，我得到了这个解决方案：

    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;
    }

javascript在textarea之前插入测试

3 个答案: