画像上にユーザー入力サイズのグリッドを作成する

Question

ユーザーが行番号と列番号を入力した後、画像にグリッド線を追加したい。しかし、私はJS JS CSSをhtmlにするにはあまりにも新しいです。例えば

：

<img src="web-image/preview.jpg"> 
<input type="number" name="row"> 
<input type="number" name="column"> 

ユーザ入力行= 2、および列= 3 中央を横切る1本の水平ラインと垂直方向に第1および「プレビューの2つの第3の両端の2行があるかどう.jpg "グリッドは図面である必要があります。画像を分割したりクリックしたりする必要はありません。

Answer 1

あなたはjQueryの.on()で始まり、append()を使用して、このクイックコードをチェックすることができます：私はこれを行うには良い方法があると確信しているが、これがあるべき

$('button').on('click', function() { 
 
    $('.grid table').html(''); 
 
    var rows = $('input[name="row"]').val(), 
 
    cols = $('input[name="column"]').val(); 
 
    for (i = 0; i < rows; i++) { 
 
    $('.grid table').append('<tr></tr>') 
 
    } 
 
    for (t = 0; t < cols; t++) { 
 
    $('.grid table tr').each(function() { 
 
     $(this).append('<td></td>') 
 
    }) 
 
    } 
 
})

.grid { 
 
    position: relative; 
 
    display: inline-block; 
 
    height:300px; 
 
} 
 
.grid table { 
 
    border-collapse: collapse; 
 
    position: absolute; 
 
    left: 0; 
 
    top: 0; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.grid table td { 
 
    border:1px solid red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="grid"> 
 
    <table></table> 
 
    <img src="http://lorempixel.com/300/300"> 
 
</div> 
 
<br> 
 
<input type="number" name="row"> 
 
<input type="number" name="column"> 
 
<button>Create Grid</button>

Answer 2

あなたのJSでは、ぼかしまたはキーアップを使用して、ユーザーがフィールドで完了したことを検出できます。私はあなたがグリッド線の点で必要なものを正確にはわかりませんが、これは水平のバーを追加するだけです。

---

を必要なものに置き換えることができます。

$('input[name="row"]').blur(function(){ 
    if($(this).val() == 2){ 
    //add your bars 
    $('body').append('<hr><hr>'); 
    } 
}); 

Answer 3

を従うのはかなり簡単です。そしてそれは楽しいものでした！

// Reference used elements 
 
var wrapper = document.getElementById('wrapper'); 
 
var btn = document.getElementById('update'); 
 
var rows = document.getElementById('rows'); 
 
var cols = document.getElementById('cols'); 
 

 
btn.addEventListener("click", drawLines); 
 

 
function drawLines() { 
 
    // Clean up 
 
    removeLines(); 
 

 
    var rowCount = rows.value; 
 
    var colCount = cols.value; 
 
    var wrapperHeight = wrapper.clientHeight; 
 

 
    // Create rows 
 
    for (var i = 1; i < rowCount; i++) { 
 
    var line = document.createElement('div'); 
 
    line.className = 'line row'; 
 
    line.style.top = (wrapperHeight/rowCount) * i + 'px'; 
 

 
    wrapper.appendChild(line); 
 
    } 
 

 
    // Create columns 
 
    for (var i = 1; i < colCount; i++) { 
 
    var line = document.createElement('div'); 
 
    line.className = 'line column'; 
 
    line.style.left = (wrapperHeight/colCount) * i + 'px'; 
 

 
    wrapper.appendChild(line); 
 
    } 
 
} 
 

 
function removeLines() { 
 
    var lines = document.getElementsByClassName('line'); 
 
    while (lines.length > 0) { 
 
    lines[0].parentNode.removeChild(lines[0]); 
 
    } 
 
}

#wrapper { 
 
    width: 300px; 
 
    height: 300px; 
 
    position: relative; 
 
} 
 
.line { 
 
    background: white; 
 
    position: absolute; 
 
} 
 
.row { 
 
    height: 1px; 
 
    left: 0; 
 
    right: 0; 
 
} 
 
.column { 
 
    width: 1px; 
 
    top: 0; 
 
    bottom: 0; 
 
}

<div id="wrapper"> 
 
    <img id="img" src="http://placehold.it/300x300"> 
 
</div> 
 

 
<input id="rows" type="number" name="row" placeholder="Rows"> 
 
<input id="cols" type="number" name="column" placeholder="Columns"> 
 
<button id="update">Update</button>