如何使用 javascript 替换 innerhtml 中的值

Question

我正在动态地（单击单选按钮）将一行（在 table 中）的内部 html 复制到另一行，但在删除一些元素之后。

var a = document.getElementById('copyrow' + e).innerHTML;
a = a.replace('<input type="radio" name="selectradio" id="shareredio"+e "" a="" href="#" onclick="setText("+e");">',"")
    .replace('<div class="custom-radio" style="margin-top:50px;">',"")
    .replace('<label for="shareredio"+e""></label>',"")
    .replace('<input type="checkbox" name="sharecheck" id="sharecheck"+e"">',"")
    .replace('<label for="sharecheck"+e""></label>',"")
    .replace('Share fare',"");

document.getElementById('copyDiv').innerHTML = a;

我对javascript的了解还不够，如果有更好的方法请帮忙...

Answer 1

这可能不是最好的方法，但我想我至少会尽快给您答复。这是使用 jQuery 来操纵 DOM。

var $a = $('#copyrow'+e).clone();
$a.find('input#shareredio'+e).remove();
$a.find('div.custom-radio').remove();
$a.find('label[for="shareredio'+e+'"]').remove();
$a.find('input#sharecheck'+e).remove();
$a.find('label[for="sharecheck'+e+'"]').remove();

var result = $a.html().replace('Share fare', "");

$('#copyDiv').html(result);

Answer 2

是这样的吗？

$(document).ready(function() {
    $('.copy').on('change', function(){
        if($('.copy:checked').val() == 'yes'){
            $('.table2').find('.rowContents1').html($('.table1').find('.rowContents1').html());
            $('.table2').find('.rowContents2').html($('.table1').find('.rowContents2').html());
            $('.table2').find('.rowContents3').html($('.table1').find('.rowContents3').html());
        }
        else {
            $('.table2').find('.rowContents1').html('');
            $('.table2').find('.rowContents2').html('');
            $('.table2').find('.rowContents3').html('');
        }
    });
});

table {
    border: 1px solid gray;
}
td, th {
    border: 1px solid gray;
    padding: 5px;
    text-align: center;
}
div{
    display: inline-block;
    margin-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Copy Contents Over?<br/>
<input type="radio" class="copy" value="yes" name="copyRadio"/> Yes
<input type="radio" class="copy" value="no" name="copyRadio"/> No
<br/><br/>
<div>
    Table1
    <table class="table1">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1">This is the Contents of Row 1</td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2">This is the Contents of Row 2</td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3">This is the Contents of Row 3</td>
            </tr>
        </body>
    </table>
</div>
<div>
    Table2
    <table class="table2">
        <header>
            <tr>
                <th>Row Number</th>
                <th>Row Contents</th>
            </tr>
        </header>
        <body>
            <tr>
                <td class="rowNum1">1</td>
                <td class="rowContents1"></td>
            </tr>
            <tr>
                <td class="rowNum2">2</td>
                <td class="rowContents2"></td>
            </tr>
            <tr>
                <td class="rowNum3">3</td>
                <td class="rowContents3"></td>
            </tr>
        </body>
    </table>
</div>

我用.html()重写了每个td里面的内容。 .find()函数只是向下遍历元素树，找到后代$('.table2').find('.rowContents1')在class.table2的元素中说，找到class[=18=的后代].

希望这对您有所帮助并且正是您要找的

如何使用 javascript 替换 innerhtml 中的值

how to replace values in innerhtml using javascript

html

javascript

jquery

replace

innerhtml